MediaWiki:Timeless.css
From PegasusXI Wiki
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.
/* PegasusXI Wiki - Timeless chrome and dark theme
*
* Generated by scripts/build-wiki-css.mjs from site/public/pegasus-theme.css and
* site/public/pegasus-dark.css. Do not edit here; regenerate instead.
*
* Dark is the default. The original files keyed off html.skin-theme-clientpref-night, a class real
* Timeless never emits, so the selectors are rewritten to html:not(.pg-day): the dark theme applies
* with no script involvement and light mode is opted into by adding .pg-day to <html>. Doing it the
* other way round would flash a light page on every load before the script ran.
*
* The article body is inverted rather than restyled. Content carries light backgrounds from hundreds
* of rules in MediaWiki:Common.css plus inline styles on template tables; inverting flips background
* and text together, so BG-Wiki's colour coding survives and contrast cannot collapse to
* light-on-light. Images are inverted a second time so they render true to colour.
*/
/* PegasusXI theme over Timeless — layout stays BG-Wiki, chrome uses Pegasus colors */
#mw-header-container {
background: #080b14 !important;
color: #e4e8f0 !important;
}
#p-logo-text {
max-width: 14em !important;
min-width: 14em !important;
width: 14em;
padding-right: 0 !important;
text-align: center !important;
}
#p-logo-text a,
#p-logo-text a.long {
color: #c9a032 !important;
font-family: Cinzel, Georgia, serif !important;
font-variant: normal !important;
font-weight: 700;
letter-spacing: 0.03em;
white-space: normal !important;
font-size: 1.5em !important;
line-height: 0.85 !important;
height: 100% !important;
width: 100%;
justify-content: center;
text-align: center;
}
#personal h2 span { color: #e4e8f0; }
#simpleSearch { background: #0c1020; border-color: rgba(140, 170, 220, 0.25); }
#searchInput { color: #e4e8f0; }
#searchButton, #mw-searchButton { filter: invert(1) brightness(1.35); }
#personal h2 { color: #e4e8f0 !important; }
#p-logo {
width: calc(100% + 1em);
box-sizing: border-box;
text-align: center;
}
.mw-wiki-logo.timeless-logo img {
width: 135px;
height: auto;
object-fit: contain;
display: block;
margin: 0.75em auto 0.5em;
border-radius: 0;
box-shadow: none;
background: transparent;
}
#p-search h3 { color: #e4e8f0; }
#searchInput::placeholder { color: #8a92a8; }
.color-left { background: #c9a032 !important; }
.color-middle { background: #4a7ec2 !important; }
.color-right { background: #7cc5e8 !important; }
#mw-content-container {
background: #0c1020 !important;
border-bottom-color: #c9a032 !important;
background-image: none !important;
}
html.pg-day #mw-content {
background: #fff !important;
}
#mw-site-navigation .sidebar-chunk > h2,
#mw-related-navigation .sidebar-chunk > h2 {
color: #e4e8f0;
}
.mw-body h1.firstHeading {
border-bottom-color: #c9a032 !important;
}
#mw-footer-container {
background: #080b14 !important;
border-top-color: rgba(140, 170, 220, 0.15) !important;
color: #8a92a8 !important;
}
#mw-footer-container a { color: #7cc5e8 !important; }
#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3 {
border-bottom-color: #c9a032 !important;
}
a { color: #4a7ec2; }
a:hover { color: #6498da; }
.tools-inline li.selected { border-bottom-color: #c9a032 !important; }
#localNotice { background: #0c1020; }
.sitenotice { background: #111628 !important; color: #e4e8f0; }
.sitenotice td { border-color: rgba(74, 126, 194, 0.45) !important; }
.sitenotice a { color: #7cc5e8 !important; }
/* #user-tools is inline-block, so this must stay inline-block or it pushes the
personal menu onto its own line. Hidden below 851px, where Timeless turns the
user menu into an absolutely positioned icon that it would collide with. */
#p-discord-signin {
display: none;
margin-right: 1em;
vertical-align: top;
}
@media screen and (min-width: 851px) {
#p-discord-signin {
display: inline-block;
}
}
.pg-discord-signin {
display: inline-block;
background: #5865f2;
color: #fff !important;
font-size: 0.85em;
font-weight: 600;
padding: 0.4em 0.9em;
border-radius: 4px;
text-decoration: none;
white-space: nowrap;
}
.pg-discord-signin:hover {
background: #4752c4;
color: #fff !important;
}
#discord-panel {
display: none;
}
/* ---- Fluid three-column layout ----
Stock Timeless only builds three columns at >=1340px. Below that it snaps into other layouts:
1100-1339px stacks the right sidebar (#mw-content-wrapper goes float:right;width:100%), and
851-1099px turns both sidebars into absolutely positioned dropdown toggles. On a display with
Windows scaling at 125% even a maximized 1920px screen reports only ~1536px, so those bands are
easy to land in. These overrides start the flex layout at 1000px and let the sidebars shrink
with the window, so the columns track the window instead of snapping between fixed sizes. */
@media screen and (min-width: 1000px) {
#mw-content-block {
display: flex !important;
clear: both !important;
}
#mw-site-navigation,
#mw-related-navigation {
position: relative !important;
display: block !important;
top: auto !important;
right: auto !important;
width: auto !important;
box-sizing: border-box;
}
#mw-site-navigation {
order: 1;
flex: 0 1 14em;
min-width: 10.5em;
padding-left: 0 !important;
padding-right: 1em !important;
}
#mw-content-wrapper {
order: 2;
flex: 1 1 0%;
float: none !important;
width: auto !important;
min-width: 0;
}
#mw-related-navigation {
order: 3;
flex: 0 1 16em;
min-width: 11em;
padding-left: 1em !important;
padding-right: 0 !important;
}
#mw-content {
margin-top: 0 !important;
}
/* In column mode the sidebar panels are always open, not collapsible dropdowns. */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
display: block !important;
position: static !important;
min-width: 0 !important;
margin-left: 0 !important;
}
#mw-site-navigation .sidebar-chunk > h2,
#mw-related-navigation .sidebar-chunk > h2 {
cursor: default;
}
#mw-site-navigation .sidebar-chunk > h2::after,
#mw-related-navigation .sidebar-chunk > h2::after,
#mw-site-navigation .sidebar-chunk h2 span::before,
#mw-site-navigation .sidebar-chunk h2 span::after,
#mw-site-navigation .sidebar-inner::before,
#mw-site-navigation .sidebar-inner::after,
#mw-related-navigation .sidebar-inner::before,
#mw-related-navigation .sidebar-inner::after {
display: none !important;
}
/* The secondary color bar is a white block used only by the narrow layouts. */
#mw-header-nav-hack {
display: none !important;
}
#p-logo {
display: block !important;
}
#discord-panel {
display: block;
margin: 0 0 1em;
border-radius: 4px;
overflow: hidden;
}
}
.pg-discord-widget {
display: block;
width: 100%;
height: 340px;
border: 0;
}
.pg-discord-fallback {
text-align: center;
padding: 1em;
background: #111628;
border: 1px solid rgba(140, 170, 220, 0.25);
border-radius: 4px;
}
.pg-discord-name {
margin: 0 0 0.35em;
font-weight: 600;
color: #e4e8f0;
}
.pg-discord-counts {
margin: 0 0 0.7em;
font-size: 0.9em;
color: #98a1b9;
}
.pg-discord-join {
display: inline-block;
background: #5865f2;
color: #fff !important;
font-weight: 600;
padding: 0.45em 1.1em;
border-radius: 4px;
text-decoration: none;
}
.pg-discord-join:hover {
background: #4752c4;
color: #fff !important;
}
img[usemap],
.noresize img[usemap],
figure.noresize img {
max-width: none !important;
}
.noresize { overflow-x: auto; }
.imageMapHighlighter figure,
figure.mw-ext-imagemap-desc-bottom-right {
display: inline-block;
position: relative;
}
map area { cursor: pointer; }
/* ---- Vana'diel Time panel ----
Lives in a normal Timeless portlet list item, so the list styling has to be undone. Weekday
colors are the elemental colors used by the other Vana'diel clocks; pegasus-dark.css lightens
them for the night theme, where the darker ones (Watersday, Darksday) would be unreadable. */
#n-vanatime {
list-style: none;
margin: 0;
padding: 0;
}
#n-vanatime::before {
content: none;
}
.pg-vana {
display: flex;
flex-direction: column;
gap: 0.3em;
padding: 0.15em 0 0.25em;
line-height: 1.35;
}
.pg-vana-line {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 0.35em;
}
.pg-vana-clock {
font-size: 1.05em;
font-variant-numeric: tabular-nums;
}
.pg-vana-tilde {
opacity: 0.5;
}
.pg-vana-day {
font-weight: 700;
}
.pg-vana-moon {
display: inline-flex;
align-items: baseline;
gap: 0.3em;
}
.pg-vana-moon-icon {
font-size: 1.05em;
}
.pg-vana-dot {
flex: 0 0 auto;
width: 0.55em;
height: 0.55em;
border-radius: 50%;
background: #9aa0ac;
}
.pg-vana-server[data-state="online"] .pg-vana-dot {
background: #35c46a;
}
.pg-vana-server[data-state="offline"] .pg-vana-dot {
background: #e04747;
}
/* Hidden when there is no player count to show, so "Online" doesn't trail a stray gap. */
.pg-vana-server-count:empty {
display: none;
}
.pg-vana-day-0 { color: #ff0000; }
.pg-vana-day-1 { color: #aaaa00; }
.pg-vana-day-2 { color: #0000dd; }
.pg-vana-day-3 { color: #00aa22; }
.pg-vana-day-4 { color: #7799ff; }
.pg-vana-day-5 { color: #aa00aa; }
.pg-vana-day-6 { color: #aaaaaa; }
.pg-vana-day-7 { color: #333333; }
/* PegasusXI night theme — dark wiki over the Timeless layout.
Scoped to html:not(.pg-day) (the default) so day mode keeps BG-Wiki's original look.
Class names follow MediaWiki 1.43 / Extension:DarkMode so the markup matches HorizonXI's wiki.
Two different techniques, on purpose:
- The chrome (header, sidebar, footer) is styled directly, because we own that markup.
- The article body is inverted, because we don't. BG-Wiki's content carries light backgrounds
from ~281 declarations in site-styles.css (.category-header, table.item td, .altrowgrey-*)
plus inline styles on template tables. Restyling those by hand means guessing at each
matching text color; inverting flips background and text together, so BG-Wiki's color
coding survives and contrast can never collapse to light-on-light. */
html:not(.pg-day) {
--pg-bg: #0c1020;
--pg-panel: #111628;
--pg-panel-alt: #161c31;
--pg-text: #e4e8f0;
--pg-muted: #98a1b9;
--pg-line: rgba(140, 170, 220, 0.22);
--pg-gold: #c9a032;
--pg-link: #7cc5e8;
color-scheme: dark;
}
html:not(.pg-day) body {
background: var(--pg-bg);
color: var(--pg-text);
}
/* ---- Chrome: styled directly, never inverted ---- */
html:not(.pg-day) #mw-content,
html:not(.pg-day) #mw-content-wrapper,
html:not(.pg-day) .mw-body {
background: var(--pg-panel) !important;
color: var(--pg-text);
border-color: var(--pg-line) !important;
}
html:not(.pg-day) .mw-body h1.firstHeading {
color: #f1f3f9;
}
html:not(.pg-day) #siteSub,
html:not(.pg-day) #contentSub,
html:not(.pg-day) #mw-content-subtitle,
html:not(.pg-day) .printfooter,
html:not(.pg-day) #mw-page-header-links h3 {
color: var(--pg-muted);
}
html:not(.pg-day) .printfooter a {
color: var(--pg-link);
}
/* Sidebar and dropdown panels.
Timeless paints BOTH the outer .sidebar-chunk and the inner .sidebar-inner, so the chunk needs
the dark treatment too or its light background shows through around the panel.
These selectors are deliberately ID-scoped. BG-Wiki's site-styles.css ships this at all widths:
#mw-site-navigation .sidebar-chunk,#mw-related-navigation .sidebar-chunk
{ background:#f8f9fa !important; border:solid #eaecf0 !important }
When two declarations are both !important the cascade falls back to specificity, so a
class-only selector loses to their ID and the sidebar renders light. Adding the ID here wins.
Their `border` shorthand also resets border-width to medium (3px), hence border-width below. */
html:not(.pg-day) .sidebar-chunk,
html:not(.pg-day) .sidebar-inner,
html:not(.pg-day) .dropdown,
html:not(.pg-day) #mw-site-navigation .sidebar-chunk,
html:not(.pg-day) #mw-site-navigation .sidebar-inner,
html:not(.pg-day) #mw-related-navigation .sidebar-chunk,
html:not(.pg-day) #mw-related-navigation .sidebar-inner {
background: var(--pg-panel) !important;
border-color: var(--pg-line) !important;
border-width: 1px !important;
box-shadow: none !important;
}
html:not(.pg-day) .sidebar-chunk h3,
html:not(.pg-day) .sidebar-chunk label,
html:not(.pg-day) .sidebar-inner h3,
html:not(.pg-day) .sidebar-inner label,
html:not(.pg-day) .dropdown h3,
html:not(.pg-day) #mw-site-navigation .sidebar-chunk h3,
html:not(.pg-day) #mw-site-navigation .sidebar-inner h3,
html:not(.pg-day) #mw-related-navigation .sidebar-chunk h3,
html:not(.pg-day) #mw-related-navigation .sidebar-inner h3 {
color: var(--pg-gold) !important;
border-bottom-color: var(--pg-line) !important;
}
/* The little pointer triangles above the dropdown panels are light-colored borders. */
html:not(.pg-day) .sidebar-inner::before,
html:not(.pg-day) .sidebar-inner::after,
html:not(.pg-day) .sidebar-chunk h2 span::before,
html:not(.pg-day) .sidebar-chunk h2 span::after {
border-bottom-color: var(--pg-panel) !important;
}
/* Also ID-scoped: Timeless colors these as "#mw-site-navigation .sidebar-inner a", which outranks
a class-only selector even though it isn't !important. */
html:not(.pg-day) .sidebar-inner a,
html:not(.pg-day) .dropdown a,
html:not(.pg-day) #mw-site-navigation .sidebar-inner a,
html:not(.pg-day) #mw-related-navigation .sidebar-inner a {
color: var(--pg-link) !important;
}
html:not(.pg-day) #mw-site-navigation .sidebar-inner a.new,
html:not(.pg-day) #mw-related-navigation .sidebar-inner a.new {
color: #e88a8a !important;
}
/* Page action tabs and category bar */
html:not(.pg-day) #mw-page-header-links .tools-inline li a {
color: var(--pg-link);
}
html:not(.pg-day) .tools-inline li.selected a {
color: var(--pg-text);
}
html:not(.pg-day) #catlinks,
html:not(.pg-day) .catlinks {
background: var(--pg-panel-alt) !important;
border-color: var(--pg-line) !important;
color: var(--pg-text);
}
html:not(.pg-day) #catlinks a {
color: var(--pg-link);
}
/* Form controls on special pages */
html:not(.pg-day) input[type="text"],
html:not(.pg-day) input[type="search"],
html:not(.pg-day) textarea,
html:not(.pg-day) select {
background: var(--pg-panel-alt);
color: var(--pg-text);
border: 1px solid var(--pg-line);
}
/* ---- Article body: inverted ----
Colors below are the pre-inversion (light-mode) values, chosen so that inverting
them lands on readable light text. #mw-content-text has no background of its own,
so the dark panel behind it shows through without being inverted. */
html:not(.pg-day) #mw-content-text {
color: #202122;
filter: invert(1) hue-rotate(180deg);
}
html:not(.pg-day) #mw-content-text a {
color: #0645ad;
}
html:not(.pg-day) #mw-content-text a:visited {
color: #0b0080;
}
html:not(.pg-day) #mw-content-text a.new {
color: #d73333;
}
/* Media is re-inverted so icons, maps and screenshots render true to color. */
html:not(.pg-day) #mw-content-text img,
html:not(.pg-day) #mw-content-text svg,
html:not(.pg-day) #mw-content-text video {
filter: invert(1) hue-rotate(180deg);
}
/* ---- Theme toggle, styled after Extension:DarkMode's moon/sun affordance ---- */
.ext-darkmode-link { cursor: pointer; }
.ext-darkmode-link::before {
content: "\263E";
display: inline-block;
margin-right: 0.4em;
}
html:not(.pg-day) .ext-darkmode-link::before { content: "\263C"; }
/* ---- Vana'diel Time panel ----
The elemental weekday colors are chosen for a white sidebar, so Watersday (#0000dd) and
Darksday (#333) are nearly invisible on the dark panel. These keep each element's hue but lift
it to a readable lightness. ID-scoped for the same reason as the sidebar rules above. */
html:not(.pg-day) #mw-site-navigation .pg-vana-day-0 { color: #ff6b6b; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-1 { color: #d8c34a; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-2 { color: #6ea8ff; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-3 { color: #4fd07a; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-4 { color: #a9c7ff; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-5 { color: #d98ada; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-6 { color: #ececec; }
html:not(.pg-day) #mw-site-navigation .pg-vana-day-7 { color: #99a3ba; }
html:not(.pg-day) #mw-site-navigation .pg-vana-clock { color: var(--pg-text); }
html:not(.pg-day) #mw-site-navigation .pg-vana-date,
html:not(.pg-day) #mw-site-navigation .pg-vana-server-text {
color: var(--pg-muted);
}
html:not(.pg-day) #mw-site-navigation .pg-vana-server-count { color: var(--pg-text); }
