MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 00:35, 30 August 2026

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


/* Carried as a mask rather than an <img> so it takes the button's own text colour. Held in a
   variable because MediaWiki:Timeless.css is generated, and a data URI is easier to find and
   replace in one place than inline in a rule. */
:root {
  --pg-discord-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.317 4.369a19.79 19.79 0 00-4.885-1.515.074.074 0 00-.079.037c-.21.375-.444.864-.608 1.25a18.27 18.27 0 00-5.487 0 12.64 12.64 0 00-.617-1.25.077.077 0 00-.079-.037A19.736 19.736 0 003.677 4.37a.07.07 0 00-.032.027C.533 9.046-.32 13.58.099 18.057a.082.082 0 00.031.057 19.9 19.9 0 005.993 3.03.078.078 0 00.084-.028c.462-.63.874-1.295 1.226-1.994a.076.076 0 00-.041-.106 13.107 13.107 0 01-1.872-.892.077.077 0 01-.008-.128c.126-.094.252-.192.372-.291a.074.074 0 01.077-.01c3.928 1.793 8.18 1.793 12.062 0a.074.074 0 01.078.009c.12.099.246.198.373.292a.077.077 0 01-.006.127 12.3 12.3 0 01-1.873.891.077.077 0 00-.041.107c.36.698.772 1.362 1.225 1.993a.076.076 0 00.084.028 19.839 19.839 0 006.002-3.03.077.077 0 00.032-.054c.5-5.177-.838-9.674-3.549-13.66a.061.061 0 00-.031-.03zM8.02 15.331c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.956 2.419-2.157 2.419zm7.975 0c-1.183 0-2.157-1.085-2.157-2.419 0-1.333.955-2.418 2.157-2.418 1.21 0 2.176 1.095 2.157 2.418 0 1.334-.946 2.419-2.157 2.419z'/%3E%3C/svg%3E");
}

#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; }
/* #mw-header is a flex row and Timeless assigns explicit orders: #p-logo-text 1, #p-search 2,
   #user-tools 3. Without an order of its own this button defaults to 0 and jumps ahead of all
   three, which is why it first rendered at the far left of the header. Order 4 puts it at the
   right-hand end, past the personal menu.

   Hidden below 851px, where Timeless turns the user menu into an absolutely positioned icon that
   this would collide with. */
#p-discord-signin {
  display: none;
  order: 4;
  flex: 0 0 auto;
  margin-left: 1em;
  align-self: center;
}
@media screen and (min-width: 851px) {
  #p-discord-signin {
    display: inline-block;
  }
}
.pg-discord-signin {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  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;
}
/* Held while the login form is fetched. That is one same-origin request, so this is usually a single
   frame, but without it a slow connection looks like a dead button. */
.pg-discord-signin-busy {
  opacity: 0.65;
  pointer-events: none;
}
/* The Discord mark, so the button reads as Discord at a glance rather than relying on the word. */
.pg-discord-signin-mark {
  width: 1.15em;
  height: 1.15em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--pg-discord-mark) center / contain no-repeat;
  mask: var(--pg-discord-mark) center / contain no-repeat;
}
#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;
  }
}
/* ---- Discord presence panel ----
   The member list is fetched from widget.json and rendered by MediaWiki:Gadget-pegasus.js rather
   than embedded as Discord's own iframe, because that iframe is cross-origin and stuck on Discord's
   blurple. Rendering it ourselves means it takes this wiki's palette; only the join button keeps
   Discord's colour, where the brand cue is the point. */
.pg-discord {
  background: #111628;
  border: 1px solid rgba(140, 170, 220, 0.25);
  border-radius: 4px;
  padding: 0.75em;
  text-align: center;
}
.pg-discord-head {
  margin-bottom: 0.6em;
}
.pg-discord-title {
  display: block;
  font-family: Cinzel, Georgia, serif;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: #c9a032;
}
.pg-discord-count {
  display: block;
  font-size: 0.85em;
  color: #98a1b9;
}
.pg-discord-members {
  list-style: none;
  margin: 0 0 0.7em;
  padding: 0;
  text-align: left;
  /* Roughly ten rows before scrolling, so a busy server cannot push the join button out of view. */
  max-height: 17em;
  overflow-y: auto;
}
.pg-discord-members::-webkit-scrollbar {
  width: 6px;
}
.pg-discord-members::-webkit-scrollbar-thumb {
  background: rgba(140, 170, 220, 0.3);
  border-radius: 3px;
}
.pg-discord-member {
  display: flex;
  align-items: center;
  gap: 0.45em;
  padding: 0.15em 0;
  font-size: 0.85em;
  color: #c8cee0;
}
.pg-discord-avatar {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #0c1020;
}
.pg-discord-member-name {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Discord's own status colours: recognisable, and the only place they are used. A ring around the
   avatar rather than a separate dot, so a long name keeps the full width. */
.pg-discord-member[data-status="online"] .pg-discord-avatar {
  box-shadow: 0 0 0 2px #23a55a;
}
.pg-discord-member[data-status="idle"] .pg-discord-avatar {
  box-shadow: 0 0 0 2px #f0b232;
}
.pg-discord-member[data-status="dnd"] .pg-discord-avatar {
  box-shadow: 0 0 0 2px #f23f43;
}
.pg-discord-member[data-status="offline"] .pg-discord-avatar {
  box-shadow: 0 0 0 2px rgba(140, 170, 220, 0.35);
}
/* If the server widget is switched off, widget.json 403s and the panel falls back to a plain join
   box -- the empty list would otherwise leave a gap under the heading. */
.pg-discord[data-state="unavailable"] .pg-discord-members {
  display: none;
}
.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); }
Anonymous

Search

MediaWiki:Timeless.css: Difference between revisions

Namespaces

More

Page actions

Latest revision as of 00:35, 30 August 2026

Navigation

PegasusXI

The Hub

Adventurer Tools

Character & Jobs

Game Content

Endgame Content

Items

Browse

Wiki tools

Wiki tools

Anonymous

Search

MediaWiki:Timeless.css: Difference between revisions

Latest revision as of 00:35, 30 August 2026

Navigation

Wiki tools

Page tools
