MediaWiki:Common.css: Difference between revisions

Revision as of 04:14, 3 April 2026

/* ---------- Remove leftover white backgrounds ---------- */

/* Whole page wrappers */
html,
body,
#mw-page-base,
#mw-head-base,
#mw-wrapper,
#content-wrapper,
#main-content,
#mw-content-block,
#mw-content-container,
.mw-body,
#content,
.main-column,
#column-content,
#bodyContent,
#mw-content-text {
    background: transparent !important;
    color: var(--fable-text) !important;
}

/* Main article surface */
#mw-content-container,
.mw-body,
#content,
.main-column {
    background: linear-gradient(180deg, rgba(30,40,34,0.96), rgba(24,33,28,0.96)) !important;
}

/* Sidebar boxes / empty boxes */
.sidebar-chunk,
.portlet,
.portlet-body,
#p-navigation,
#p-tb,
#p-search,
#p-personal,
#p-lang,
#p-views,
#p-cactions {
    background: rgba(38, 51, 43, 0.72) !important;
    color: var(--fable-text) !important;
    border-color: var(--fable-border) !important;
}

/* The white strip / empty widget-looking area */
div[style*="background:#fff"],
div[style*="background: #fff"],
div[style*="background:white"],
div[style*="background: white"] {
    background: rgba(38, 51, 43, 0.72) !important;
    border: 1px solid var(--fable-border) !important;
    color: var(--fable-text) !important;
}

/* Search / header / personal area */
#mw-header-container,
#site-navigation,
#mw-related-navigation,
#p-logo,
#p-search,
#p-personal {
    background: linear-gradient(180deg, #1a241e 0%, #121915 100%) !important;
}

/* Code editor / pre blocks */
pre,
code,
.mw-code,
textarea,
.CodeMirror,
.ace_editor,
.wikieditor-toolbar,
.wikiEditor-ui,
.editOptions {
    background: #101713 !important;
    color: #e6e1d2 !important;
    border-color: var(--fable-border) !important;
}

/* Tables / TOC / message boxes */
table,
tbody,
tr,
td,
th,
#toc,
.toc,
.infobox,
.mw-message-box,
.catlinks {
    background-color: transparent;
}

.wikitable,
#toc,
.toc,
.infobox,
.mw-message-box,
.catlinks {
    background: linear-gradient(180deg, rgba(36,47,40,0.95), rgba(26,34,29,0.95)) !important;
}

/* Page tools panel on right */
#mw-related-navigation .sidebar-chunk,
#mw-related-navigation .portlet,
#mw-related-navigation .sidebar-inner {
    background: rgba(26, 34, 29, 0.88) !important;
}

/* Links inside panels */
.sidebar-chunk a,
.portlet a,
#mw-related-navigation a,
#mw-site-navigation a {
    color: var(--fable-text) !important;
}

/* Selection / highlight */
::selection {
    background: rgba(201,169,94,0.25);
    color: #fff7df;
}

Anonymous

Search

MediaWiki:Common.css: Difference between revisions

Namespaces

More

Page actions

Revision as of 04:14, 3 April 2026

Navigation

Navigation

Wiki tools

Wiki tools

@@ Line 1: / Line 1: @@
-/* ---------- Core palette ---------- */
+/* ---------- Remove leftover white backgrounds ---------- */
-: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 ---------- */
+/* Whole page wrappers */
 html,
-body {
+body,
-  background:
+#mw-page-base,
-    radial-gradient(circle at top, rgba(122,154,104,0.08), transparent 32%),
+#mw-head-base,
-    linear-gradient(180deg, #0e1411 0%, #121915 100%);
+#mw-wrapper,
-  color: var(--fable-text);
+#content-wrapper,
-  font-family: Georgia, "Times New Roman", serif;
+#main-content,
+#mw-content-block,
+#mw-content-container,
+.mw-body,
+#content,
+.main-column,
+#column-content,
+#bodyContent,
+#mw-content-text {
+    background: transparent !important;
+    color: var(--fable-text) !important;
 }
-body {
+/* Main article surface */
-  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));
+    background: linear-gradient(180deg, rgba(30,40,34,0.96), rgba(24,33,28,0.96)) !important;
-  color: var(--fable-text);
 }
-.mw-body,
+/* Sidebar boxes / empty boxes */
-#mw-content-container {
+.sidebar-chunk,
-  border: 1px solid var(--fable-border);
+.portlet,
-  box-shadow: 0 10px 28px var(--fable-shadow);
+.portlet-body,
-  border-radius: 8px;
+#p-navigation,
+#p-tb,
+#p-search,
+#p-personal,
+#p-lang,
+#p-views,
+#p-cactions {
+    background: rgba(38, 51, 43, 0.72) !important;
+    color: var(--fable-text) !important;
+    border-color: var(--fable-border) !important;
 }
-/* ---------- Header / top bar ---------- */
+/* The white strip / empty widget-looking area */
-#mw-header-container,
+div[style*="background:#fff"],
-#mw-site-navigation,
+div[style*="background: #fff"],
-#mw-related-navigation {
+div[style*="background:white"],
-  background: linear-gradient(180deg, #1a241e 0%, #121915 100%);
+div[style*="background: white"] {
-  border-bottom: 1px solid var(--fable-border);
+    background: rgba(38, 51, 43, 0.72) !important;
+    border: 1px solid var(--fable-border) !important;
+    color: var(--fable-text) !important;
 }
-#p-logo-text a,
+/* Search / header / personal area */
-#site-navigation h2,
+#mw-header-container,
-#site-navigation .sidebar-chunk h2,
+#site-navigation,
-.mw-wiki-logo + span,
+#mw-related-navigation,
-#firstHeading {
+#p-logo,
-  color: var(--fable-link);
+#p-search,
-  text-shadow: 0 0 10px var(--fable-glow);
+#p-personal {
+    background: linear-gradient(180deg, #1a241e 0%, #121915 100%) !important;
 }
-#firstHeading {
+/* Code editor / pre blocks */
-  font-weight: 700;
+pre,
-  letter-spacing: 0.4px;
+code,
+.mw-code,
+textarea,
+.CodeMirror,
+.ace_editor,
+.wikieditor-toolbar,
+.wikiEditor-ui,
+.editOptions {
+    background: #101713 !important;
+    color: #e6e1d2 !important;
+    border-color: var(--fable-border) !important;
 }
-/* ---------- Sidebar / nav ---------- */
+/* Tables / TOC / message boxes */
-#mw-site-navigation .sidebar-inner,
+table,
-#mw-related-navigation .sidebar-chunk,
+tbody,
-#site-navigation .sidebar-chunk {
+tr,
-  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 {
+#toc,
-  color: var(--fable-text);
+.toc,
+.infobox,
+.mw-message-box,
+.catlinks {
+    background-color: transparent;
 }
-small,
+.wikitable,
-.mw-editsection,
+#toc,
-#siteSub,
+.toc,
-#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;
+    background: linear-gradient(180deg, rgba(36,47,40,0.95), rgba(26,34,29,0.95)) !important;
-  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,
+/* Page tools panel on right */
-#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,
+#mw-related-navigation .portlet,
-#toc,
+#mw-related-navigation .sidebar-inner {
-.infobox {
+    background: rgba(26, 34, 29, 0.88) !important;
-  backdrop-filter: blur(1px);
 }
-/* ---------- Reduce bright default white areas some templates use ---------- */
+/* Links inside panels */
-table,
+.sidebar-chunk a,
-div,
+.portlet a,
-span {
+#mw-related-navigation a,
-  border-color: var(--fable-border);
+#mw-site-navigation a {
+    color: var(--fable-text) !important;
 }
-/* ---------- Mobile tweaks ---------- */
+/* Selection / highlight */
-@media screen and (max-width: 720px) {
+::selection {
-  .mw-body,
+     background: rgba(201,169,94,0.25);
-  #mw-content-container {
+     color: #fff7df;
-     border-radius: 0;
-  }
-  #firstHeading {
-     font-size: 1.8rem;
-  }
 }