MediaWiki:Common.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.

/* ---------- Core palette ---------- */
:root {
  --fable-bg: #0f1512;
  --fable-bg-soft: #18211c;
  --fable-panel: #1e2822;
  --fable-panel-2: #26332b;
  --fable-border: #3e4f44;
  --fable-text: #e6e1d2;
  --fable-text-soft: #b7b29f;
  --fable-link: #d7b86a;
  --fable-link-hover: #f0d896;
  --fable-accent: #7a9a68;
  --fable-accent-2: #4f6a55;
  --fable-gold: #c9a95e;
  --fable-shadow: rgba(0, 0, 0, 0.35);
  --fable-glow: rgba(201, 169, 94, 0.18);
  --fable-red: #8e4d45;
}

/* ---------- Global ---------- */
html,
body {
  background:
    radial-gradient(circle at top, rgba(122,154,104,0.08), transparent 32%),
    linear-gradient(180deg, #0e1411 0%, #121915 100%);
  color: var(--fable-text);
  font-family: Georgia, "Times New Roman", serif;
}

body {
  line-height: 1.65;
}

/* ---------- Main wrappers ---------- */
#mw-content-container,
.mw-body,
#content,
.main-column {
  background: linear-gradient(180deg, rgba(30,40,34,0.96), rgba(24,33,28,0.96));
  color: var(--fable-text);
}

.mw-body,
#mw-content-container {
  border: 1px solid var(--fable-border);
  box-shadow: 0 10px 28px var(--fable-shadow);
  border-radius: 8px;
}

/* ---------- Header / top bar ---------- */
#mw-header-container,
#mw-site-navigation,
#mw-related-navigation {
  background: linear-gradient(180deg, #1a241e 0%, #121915 100%);
  border-bottom: 1px solid var(--fable-border);
}

#p-logo-text a,
#site-navigation h2,
#site-navigation .sidebar-chunk h2,
.mw-wiki-logo + span,
#firstHeading {
  color: var(--fable-link);
  text-shadow: 0 0 10px var(--fable-glow);
}

#firstHeading {
  font-weight: 700;
  letter-spacing: 0.4px;
}

/* ---------- Sidebar / nav ---------- */
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-chunk,
#site-navigation .sidebar-chunk {
  background: rgba(38, 51, 43, 0.65);
  border: 1px solid var(--fable-border);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

#mw-site-navigation a,
#mw-related-navigation a,
.sidebar-chunk a,
.portlet a {
  color: var(--fable-text);
}

#mw-site-navigation a:hover,
#mw-related-navigation a:hover,
.sidebar-chunk a:hover,
.portlet a:hover {
  color: var(--fable-link-hover);
  text-decoration: none;
}

/* ---------- Links ---------- */
a,
.mw-parser-output a.extiw,
.mw-parser-output a.external {
  color: var(--fable-link);
  transition: color 0.15s ease, text-shadow 0.15s ease;
}

a:hover,
.mw-parser-output a.extiw:hover,
.mw-parser-output a.external:hover {
  color: var(--fable-link-hover);
  text-shadow: 0 0 8px var(--fable-glow);
}

a:visited {
  color: #b99a63;
}

/* ---------- Text ---------- */
p,
li,
dd,
dt,
td,
th,
caption {
  color: var(--fable-text);
}

small,
.mw-editsection,
#siteSub,
#contentSub,
.mw-redirectedfrom,
.printfooter {
  color: var(--fable-text-soft);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
  color: #ead8a4;
  border-color: var(--fable-border);
  font-family: Georgia, "Times New Roman", serif;
}

.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4 {
  padding-bottom: 0.2em;
}

/* ---------- Search ---------- */
#searchInput,
.mw-searchInput,
input[type="search"],
input[type="text"],
input[type="password"],
textarea,
select {
  background: #101713;
  color: var(--fable-text);
  border: 1px solid var(--fable-border);
  border-radius: 6px;
  box-shadow: inset 0 1px 4px rgba(0,0,0,0.25);
}

#searchInput:focus,
.mw-searchInput:focus,
input[type="search"]:focus,
input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus,
select:focus {
  border-color: var(--fable-gold);
  outline: none;
  box-shadow: 0 0 0 2px rgba(201,169,94,0.15);
}

/* ---------- Buttons ---------- */
button,
input[type="submit"],
input[type="button"],
.mw-ui-button {
  background: linear-gradient(180deg, #4e6552 0%, #34453a 100%);
  color: #f2ead6;
  border: 1px solid #6f8e73;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.22);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.mw-ui-button:hover {
  background: linear-gradient(180deg, #617d66 0%, #415447 100%);
  border-color: var(--fable-link);
  color: #fff6dd;
}

/* ---------- Tables ---------- */
.wikitable {
  background: rgba(24, 33, 28, 0.92);
  color: var(--fable-text);
  border: 1px solid var(--fable-border);
  border-collapse: collapse;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
  background: linear-gradient(180deg, #3f5244 0%, #2d3b32 100%);
  color: #f2e3b6;
  border: 1px solid var(--fable-border);
}

.wikitable > tr > td,
.wikitable > * > tr > td {
  background: rgba(30, 40, 34, 0.9);
  border: 1px solid var(--fable-border);
}

.wikitable tr:nth-child(even) td {
  background: rgba(36, 47, 40, 0.9);
}

/* ---------- Infobox-ish templates / content boxes ---------- */
.infobox,
.toc,
.thumbinner,
.mw-message-box,
.catlinks,
#toc {
  background: linear-gradient(180deg, rgba(36,47,40,0.95), rgba(26,34,29,0.95));
  border: 1px solid var(--fable-border);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

#toc .toctitle,
.toc .toctitle,
.infobox th {
  color: #edd8a0;
}

/* ---------- Thumbnails ---------- */
.thumbinner {
  background: #1b241f;
}

.thumbcaption {
  color: var(--fable-text-soft);
}

/* ---------- Code / pre ---------- */
pre,
code,
tt,
.mw-code {
  background: #111814;
  color: #dcd1b2;
  border: 1px solid #314038;
  border-radius: 5px;
}

/* ---------- Category bar ---------- */
.catlinks {
  margin-top: 1.2em;
  padding: 0.6em 0.8em;
}

/* ---------- Page tabs / actions ---------- */
#p-views ul li a,
#p-cactions ul li a,
.vector-menu-tabs .vector-menu-content li a {
  background: transparent;
  color: var(--fable-text-soft);
  border-radius: 6px 6px 0 0;
}

#p-views ul li.selected a,
#p-cactions ul li.selected a,
.vector-menu-tabs .selected a {
  background: rgba(201,169,94,0.12);
  color: var(--fable-link);
  border: 1px solid var(--fable-border);
  border-bottom-color: transparent;
}

/* ---------- Footer ---------- */
#footer,
#mw-footer-container {
  background: linear-gradient(180deg, #121915 0%, #0d120f 100%);
  color: var(--fable-text-soft);
  border-top: 1px solid var(--fable-border);
}

#footer a,
#mw-footer-container a {
  color: var(--fable-link);
}

/* ---------- Notices / warnings ---------- */
.error,
.mw-warning,
.warningbox {
  color: #f3d6cf;
  background: rgba(142, 77, 69, 0.18);
  border: 1px solid var(--fable-red);
  border-radius: 6px;
  padding: 0.5em 0.75em;
}

.successbox {
  background: rgba(122,154,104,0.16);
  border: 1px solid #6a8760;
  color: #e7f0de;
  border-radius: 6px;
  padding: 0.5em 0.75em;
}

/* ---------- Scrollbar (webkit browsers) ---------- */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #121915;
}

::-webkit-scrollbar-thumb {
  background: #405246;
  border: 2px solid #121915;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: #566d5d;
}

/* ---------- Optional subtle fantasy treatment ---------- */
.mw-body,
#mw-content-container,
#site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk,
.wikitable,
#toc,
.infobox {
  backdrop-filter: blur(1px);
}

/* ---------- Reduce bright default white areas some templates use ---------- */
table,
div,
span {
  border-color: var(--fable-border);
}

/* ---------- Mobile tweaks ---------- */
@media screen and (max-width: 720px) {
  .mw-body,
  #mw-content-container {
    border-radius: 0;
  }

  #firstHeading {
    font-size: 1.8rem;
  }
}