MediaWiki:Timeless.css

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.

/* Timeless sidebar/theme overrides to match the RealMU-style layout */

:root {
  --amu-bg: #060b16;
  --amu-panel: #0f1524;
  --amu-panel-2: #0a101c;
  --amu-border: #22314f;
  --amu-text: #dbe4f7;
  --amu-muted: #95a6c8;
  --amu-link: #e1a34e;
  --amu-link-hover: #ffd08a;
}

html,
body {
  background: var(--amu-bg) !important;
  color: var(--amu-text) !important;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif !important;
}

/* Keep the site title in normal flow */
@media screen and (min-width: 851px) {
  #p-logo-text a,
  #p-logo-text a.long {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
  }
}

/* Hide text logo and use image logo area only */
#p-logo-text {
  display: none !important;
}

#p-logo {
  min-height: 120px !important;
  margin: 0 0 12px 0 !important;
  border: 1px solid var(--amu-border) !important;
  background: #0b1220 url('/index.php/Special:Redirect/file/AnarchyMu_Logo.png') center center / contain no-repeat !important;
}

#p-logo a {
  display: block;
  min-height: 120px;
}

/* Keep default wiki logo image hidden when custom logo background is used */
#p-logo .mw-wiki-logo {
  opacity: 0;
}

#mw-wrapper,
#mw-content-container,
#mw-site-navigation,
#mw-related-navigation {
  background: var(--amu-bg) !important;
}

#mw-header-container,
#mw-header-nav-hack {
  background: #080d18 !important;
  border-top: 1px solid #1b2a45 !important;
  border-bottom: 1px solid #1b2a45 !important;
}

#simpleSearch {
  background: #111722 !important;
  border: 1px solid #1f2d48 !important;
  border-radius: 0 !important;
}

#searchInput {
  color: #d9e2f4 !important;
}

#searchInput::placeholder {
  color: #8ea0c1 !important;
}

#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner {
  background: transparent !important;
  border: 0 !important;
}

#site-navigation.sidebar-chunk,
#site-tools.sidebar-chunk,
#page-tools.sidebar-chunk {
  background: var(--amu-panel) !important;
  border: 1px solid var(--amu-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
  padding: 12px !important;
}

#site-navigation > h2,
#site-tools > h2,
#page-tools > h2 {
  color: #f4f7ff !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  margin: 0 0 10px 0 !important;
  padding: 0 0 8px 0 !important;
  border-bottom: 1px solid #2a3b5e !important;
}

/* Sidebar groups */
#site-navigation .mw-portlet {
  margin: 0 0 8px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

#site-navigation .mw-portlet > h3 {
  margin: 0 !important;
  padding: 9px 10px !important;
  background: var(--amu-panel-2) !important;
  border: 1px solid #1f2d48 !important;
  color: #f1f5ff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-transform: none !important;
  position: relative;
  cursor: pointer;
  user-select: none;
}

#site-navigation .mw-portlet > h3::after {
  content: "▸";
  position: absolute;
  right: 10px;
  top: 8px;
  color: var(--amu-link);
  font-size: 13px;
}

#site-navigation .mw-portlet.amu-open > h3::after {
  content: "▾";
}

#site-navigation .mw-portlet > .mw-portlet-body {
  background: #0b1220 !important;
  border: 1px solid #1f2d48 !important;
  border-top: 0 !important;
  padding: 6px 0 !important;
}

#site-navigation .mw-portlet > .mw-portlet-body ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#site-navigation .mw-portlet > .mw-portlet-body li {
  margin: 0 !important;
  padding: 0 !important;
}

#site-navigation .mw-portlet > .mw-portlet-body a {
  display: block;
  padding: 7px 10px !important;
  color: #d7e2fa !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
}

#site-navigation .mw-portlet > .mw-portlet-body a:hover {
  background: #15213a !important;
  color: #ffffff !important;
}

/* Right tools style */
#page-tools .mw-portlet > h3,
#site-tools .mw-portlet > h3 {
  margin: 0 !important;
  padding: 8px 10px !important;
  background: var(--amu-panel-2) !important;
  border: 1px solid #1f2d48 !important;
  color: #eef3ff !important;
  font-size: 14px !important;
}

#page-tools .mw-portlet-body,
#site-tools .mw-portlet-body {
  background: #0b1220 !important;
  border: 1px solid #1f2d48 !important;
  border-top: 0 !important;
}

#page-tools .mw-portlet-body ul,
#site-tools .mw-portlet-body ul {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#page-tools .mw-portlet-body a,
#site-tools .mw-portlet-body a {
  display: block;
  padding: 8px 10px !important;
  color: #d8e3fb !important;
  text-decoration: none !important;
}

#page-tools .mw-portlet-body a:hover,
#site-tools .mw-portlet-body a:hover {
  background: #15213a !important;
  color: #ffffff !important;
}

/* Content panel */
#mw-content {
  background: linear-gradient(180deg, #101725 0%, #0b111c 100%) !important;
  border: 1px solid #2a3a5e !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35) !important;
}

#siteSub,
#contentSub,
#mw-content-subtitle {
  color: var(--amu-muted) !important;
}

#mw-page-header-links .mw-portlet-body a,
#mw-page-header-links .mw-portlet-body span {
  color: #b9c8e6 !important;
}

#mw-page-header-links .selected a {
  color: var(--amu-link-hover) !important;
}

/* Remove white default TOC box and keep it in dark palette */
#toc,
.toc,
.toccolours,
.mw-parser-output .toc {
  background: #0d1424 !important;
  border: 1px solid #2a3b5e !important;
  color: #d4dff5 !important;
  box-shadow: none !important;
}

#toc .toctitle,
.toc .toctitle,
.mw-parser-output .toc .toctitle {
  background: #111a2e !important;
  border-bottom: 1px solid #2a3b5e !important;
  color: #e4ecff !important;
}

#toc .toctogglelabel,
.toc .toctogglelabel,
#toc .toctoggle,
.toc .toctoggle {
  color: var(--amu-link) !important;
}

#toc ul,
.toc ul,
#toc li,
.toc li {
  color: #c9d6f2 !important;
}

#toc a,
.toc a {
  color: #dce7ff !important;
}

#toc a:hover,
.toc a:hover {
  color: #ffffff !important;
}

#toc .tocnumber,
.toc .tocnumber {
  color: var(--amu-link) !important;
}

/* Darken wiki tables that can appear white by default */
.mw-parser-output table,
.mw-parser-output .wikitable,
.mw-parser-output table.wikitable {
  background: #0f1729 !important;
  color: #dbe4f7 !important;
  border-color: #2a3b5e !important;
}

.mw-parser-output .wikitable > tr > th,
.mw-parser-output .wikitable > * > tr > th,
.mw-parser-output .wikitable > tr > td,
.mw-parser-output .wikitable > * > tr > td {
  border-color: #2a3b5e !important;
  background: #101a2e !important;
  color: #dbe4f7 !important;
}

.mw-parser-output .wikitable > * > tr > th {
  background: #15213a !important;
  color: #f0f5ff !important;
}

#mw-content h1,
#mw-content h2,
#mw-content h3,
#mw-content h4 {
  color: #d5e1fb !important;
  border-bottom-color: #2a3b5e !important;
}

.mw-editsection a {
  color: #8ea4cf !important;
}

.mw-editsection a:hover {
  color: #b8c9eb !important;
}

#firstHeading,
.mw-first-heading {
  color: #d0dcf8 !important;
  font-size: 42px !important;
  font-weight: 600 !important;
  text-shadow: none !important;
}

#mw-content a {
  color: var(--amu-link);
}

#mw-content a:hover {
  color: var(--amu-link-hover);
}

/* Mobile */
@media screen and (max-width: 850px) {
  #site-navigation > h2,
  #site-tools > h2,
  #page-tools > h2 {
    font-size: 20px !important;
  }

  #firstHeading,
  .mw-first-heading {
    font-size: 32px !important;
  }
}