MediaWiki:Common.css: Difference between revisions

Revision as of 11:16, 26 May 2026

/* FONLINE2 MediaWiki Theme - Common.css import file */


/* Drop this into MediaWiki:Common.css or import it from there. */

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@400;500;700;800&display=swap');
:root {
    --fo-bg: #010301;
    --fo-bg-soft: #050a05;
    --fo-surface: #040804;
    --fo-surface-2: #081108;
    --fo-border: #1c2d1c;
    --fo-text: #89ff59;
    --fo-text-soft: #69da47;
    --fo-head: #c4ffac;
    --fo-link: #7ecfff;
    --fo-link-hover: #ccecff;
    --fo-muted: #4f8f3d;
    --fo-nonclickable: #93b284;
    --fo-redlink: #d98b8b;
}

html,
body {
    background: radial-gradient(circle at 24% 12%, #081008 0%, #040904 38%, #010301 100%) !important;
    color: var(--fo-text) !important;
    font-family: 'Exo', Tahoma, Verdana, sans-serif !important;
}

#mw-page-base,
#mw-head,
#mw-head-base,
#mw-navigation {
    background-color: #020602 !important;
    background-image: none !important;
}

#left-navigation,
#right-navigation,
.vector-menu-tabs,
.vector-menu-tabs .vector-menu-content,
.vector-menu-tabs .vector-menu-content ul,
.vector-menu-tabs .vector-menu-content li,
#p-namespaces ul,
#p-views ul,
#p-namespaces li,
#p-views li,
#p-namespaces li a,
#p-views li a,
#ca-nstab-main,
#ca-view,
#ca-history,
#ca-edit,
#ca-viewsource {
    background: #081008 !important;
    background-color: #081008 !important;
    background-image: none !important;
    color: var(--fo-text) !important;
    border-color: #294229 !important;
}

#p-namespaces li.selected,
#p-views li.selected,
.vector-menu-tabs .selected,
.vector-menu-tabs .selected a,
#ca-nstab-main.selected,
#ca-view.selected {
    background: #0d1b0d !important;
    background-color: #0d1b0d !important;
    background-image: none !important;
    box-shadow: inset 0 -2px 0 #7ed95f !important;
}

.vector-menu-tabs li a,
#p-namespaces li a,
#p-views li a {
    color: var(--fo-link) !important;
}

body,
.mw-body,
#content,
#bodyContent,
.vector-body,
#mw-content-text,
#mw-panel,
.vector-column-start,
.vector-column-end,
.mw-page-container,
.mw-workspace-container {
    color: var(--fo-text) !important;
}

#mw-head-base,
#mw-navigation,
#mw-panel,
.vector-sticky-header,
.vector-page-toolbar,
.vector-column-start,
.vector-column-end {
    background: transparent !important;
}

.mw-body,
#content,
.skin-vector .mw-body,
.skin-vector .vector-body {
    background: linear-gradient(180deg, rgba(5, 10, 5, 0.97), rgba(2, 6, 2, 0.98)) !important;
    border: 1px solid var(--fo-border) !important;
    box-shadow: 0 0 0 1px rgba(86, 168, 74, 0.18), inset 0 0 60px rgba(0, 0, 0, 0.62) !important;
    padding: 15px 20px !important;
}

#mw-panel,
.vector-menu,
.vector-menu-content,
.vector-pinnable-element,
.vector-column-start,
.vector-column-end,
.vector-header-container,
.mw-footer,
#footer {
    background-color: rgba(2, 8, 2, 0.82) !important;
    background-image: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.firstHeading,
.mw-page-title-main,
.vector-toc-header,
.mw-headline {
    color: var(--fo-head) !important;
    font-family: 'Exo', Tahoma, Verdana, sans-serif !important;
    letter-spacing: 0.02em;
    text-shadow: 0 0 10px rgba(128, 255, 96, 0.14);
}

p,
li,
dd,
dt,
span,
div,
td,
th {
    color: var(--fo-text);
}

a,
.mw-parser-output a,
#mw-panel a,
.vector-menu a,
.mw-changeslist a,
#p-navigation a {
    color: var(--fo-link) !important;
}

a:visited,
.mw-parser-output a:visited {
    color: #9fb7ff !important;
}

a:hover,
.mw-parser-output a:hover,
#mw-panel a:hover,
.vector-menu a:hover,
#p-navigation a:hover {
    color: var(--fo-link-hover) !important;
    text-shadow: 0 0 10px rgba(153, 255, 124, 0.25);
}

.mw-body-content {
    line-height: 1.45;
}

table.wikitable,
.mw-parser-output table.wikitable,
.mw-datatable,
.infobox {
    background: var(--fo-surface) !important;
    color: var(--fo-text) !important;
    border-color: #2a452a !important;
}

table.wikitable th,
.mw-parser-output table.wikitable th,
.mw-datatable th,
.infobox th {
    background: var(--fo-surface-2) !important;
    color: var(--fo-head) !important;
    border-color: #2a452a !important;
}

table.wikitable td,
.mw-parser-output table.wikitable td,
.mw-datatable td,
.infobox td {
    border-color: #2a452a !important;
}

pre,
code,
tt,
kbd,
samp {
    background: #0b130b !important;
    border: 1px solid #244024 !important;
    color: #b2ff93 !important;
    font-family: Consolas, 'Courier New', monospace !important;
}

input,
textarea,
select,
.mw-ui-input,
.oo-ui-inputWidget-input {
    background: #0a120a !important;
    color: var(--fo-text) !important;
    border: 1px solid #335533 !important;
}

.cdx-button,
.cdx-button:visited,
.cdx-button--fake-button,
.cdx-button--fake-button:visited,
.cdx-button.cdx-button--fake-button,
.oo-ui-buttonElement-button,
.mw-ui-button,
button {
    background: #0d1a0d !important;
    background-color: #0d1a0d !important;
    background-image: none !important;
    color: var(--fo-link) !important;
    border: 1px solid #315531 !important;
}

.cdx-button:hover,
.cdx-button--fake-button:hover,
.oo-ui-buttonElement-button:hover,
.mw-ui-button:hover,
button:hover {
    background: #132613 !important;
    color: var(--fo-link-hover) !important;
    border-color: #4e8c4e !important;
}


/* Crafting recipe tables */

.mw-parser-output .fo-crafting-table {
    /* width: 100%; */
    border-collapse: collapse;
    margin: 0.8rem 0 1.2rem;
}

.mw-parser-output .fo-crafting-table th {
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: 0.82rem;
    background: linear-gradient(180deg, #122112, #0b160b) !important;
}

.mw-parser-output .fo-crafting-table td {
    vertical-align: top;
    line-height: 1.35;
    color: var(--fo-nonclickable) !important;
}

.mw-parser-output .fo-crafting-table td:first-child,
.mw-parser-output .fo-crafting-table td:nth-child(2) {
    white-space: nowrap;
}

.mw-parser-output .fo-crafting-table img {
    border: 1px solid #345834;
    border-radius: 3px;
    background: #061006;
    margin-right: 0.3rem;
    vertical-align: middle;
}

.mw-parser-output .fo-highlight-ingredient {
    display: inline-block;
    padding: 0.04rem 0.28rem;
    border: 1px solid #4a7a3d;
    border-radius: 3px;
    background: rgba(101, 170, 74, 0.14);
}


/* Recent Changes filters / OOUI widgets */

.mw-changeslist-legend,
.mw-rcfilters-ui-filterWrapperWidget,
.mw-rcfilters-ui-filterTagMultiselectWidget-wrapper,
.mw-rcfilters-ui-filterTagMultiselectWidget-views,
.mw-rcfilters-ui-filterTagMultiselectWidget,
.mw-rcfilters-ui-cell,
.mw-rcfilters-ui-table,
.mw-rcfilters-ui-filterMenuHeaderWidget,
.mw-rcfilters-ui-filterMenuHeaderWidget-header,
.mw-rcfilters-ui-filterMenuHeaderWidget-tools,
.mw-rcfilters-ui-menuSelectWidget-footer,
.mw-rcfilters-ui-tagItemWidget,
.mw-rcfilters-ui-itemMenuOptionWidget,
.mw-rcfilters-ui-filterItemWidget,
.mw-rcfilters-ui-savedLinksListWidget,
.mw-rcfilters-ui-popuplink,
.oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-widget,
.oo-ui-draggableGroupElement,
.oo-ui-draggableElement,
.oo-ui-selectWidget,
.oo-ui-menuSelectWidget,
.oo-ui-menuOptionWidget,
.oo-ui-labelElement,
.oo-ui-tagMultiselectWidget,
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget,
.oo-ui-textInputWidget input,
.oo-ui-fieldLayout,
.oo-ui-fieldsetLayout,
.oo-ui-outlineSelectWidget,
.oo-ui-outlineOptionWidget {
    background: #081208 !important;
    background-color: #081208 !important;
    background-image: none !important;
    color: var(--fo-text) !important;
    border-color: #2f4f2f !important;
}

.mw-rcfilters-ui-tagItemWidget.oo-ui-widget-enabled,
.mw-rcfilters-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-labelElement-label,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget,
.oo-ui-tagItemWidget,
.oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-tagItemWidget-content,
.oo-ui-draggableElement,
.oo-ui-draggableElement.oo-ui-widget-enabled,
.oo-ui-draggableElement.oo-ui-widget-enabled .oo-ui-labelElement-label,
.oo-ui-draggableElement .oo-ui-tagItemWidget-content,
.oo-ui-draggableElement .oo-ui-outlineOptionWidget,
.oo-ui-draggableElement .oo-ui-optionWidget {
    background: #0e1c0e !important;
    color: var(--fo-link) !important;
    border-color: #3d6a3d !important;
}

.mw-rcfilters-ui-highlights-color-none {
    background: #101810 !important;
    border: 1px solid #355535 !important;
}

.mw-rcfilters-ui-highlights-color-c3 {
    background: #244224 !important;
    border: 1px solid #4f8a4f !important;
}

.oo-ui-checkboxInputWidget-checkIcon.oo-ui-widget-enabled,
.oo-ui-checkboxInputWidget [type='checkbox'] {
    background-color: #0f1b0f !important;
    border-color: #467846 !important;
}

.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget .oo-ui-buttonElement-button,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget .oo-ui-optionWidget,
.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget .oo-ui-labelElement-label {
    background: #0f1c0f !important;
    color: var(--fo-link) !important;
    border-color: #3e6e3e !important;
}

input:focus,
textarea:focus,
select:focus,
.mw-ui-input:focus,
.oo-ui-inputWidget-input:focus {
    border-color: #6ccf52 !important;
    box-shadow: 0 0 0 1px rgba(132, 255, 96, 0.25);
    outline: none;
}

.mw-body-content ::selection {
    background: rgba(140, 255, 120, 0.24);
    color: #e9ffe2;
}

#footer,
#catlinks,
.mw-cite-backlink,
.printfooter,
.mw-editsection a,
.mw-jump-link {
    color: var(--fo-text-soft) !important;
}

#catlinks {
    background: rgba(8, 15, 8, 0.65) !important;
    border: 1px solid #1f361f !important;
}


/* Table of contents (legacy class="toc" and variants) */

#toc,
.toc,
.mw-parser-output #toc,
.mw-parser-output .toc,
.toccolours {
    background: #081108 !important;
    background-color: #081108 !important;
    color: var(--fo-text) !important;
    border: 1px solid #2a452a !important;
}

#toc .toctitle,
.toc .toctitle,
.mw-parser-output .toc .toctitle {
    background: #0d1a0d !important;
    color: var(--fo-head) !important;
    border-bottom: 1px solid #2a452a !important;
}

#toc .toctogglelabel,
.toc .toctogglelabel,
#toc .toctitle h2,
.toc .toctitle h2 {
    color: var(--fo-head) !important;
}

#toc ul,
.toc ul,
#toc li,
.toc li,
#toc .tocnumber,
.toc .tocnumber,
#toc .toctext,
.toc .toctext {
    color: var(--fo-text) !important;
}

#toc a,
.toc a,
#toc a:visited,
.toc a:visited {
    color: var(--fo-link) !important;
}

#toc a:hover,
.toc a:hover {
    color: var(--fo-link-hover) !important;
}

#toc a.new,
.toc a.new,
#toc a.new:visited,
.toc a.new:visited {
    color: var(--fo-redlink) !important;
}


/* Optional subtle CRT/noise effect on body background */

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(130, 255, 90, 0.05) 0.5px, transparent 0.5px), linear-gradient(rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.22));
    background-size: 3px 3px, 100% 100%;
    opacity: 0.35;
    z-index: 0;
}

.mw-page-container,
#content {
    position: relative;
    z-index: 1;
}

.mw-parser-output .fo-crafting-table a,
.mw-parser-output .fo-crafting-table a:visited {
    color: var(--fo-link) !important;
    font-weight: 600;
}

.mw-parser-output .fo-crafting-table a:hover {
    color: var(--fo-link-hover) !important;
}

.mw-parser-output .fo-crafting-table a.new,
.mw-parser-output .fo-crafting-table a.new:visited {
    color: var(--fo-redlink) !important;
}

.mw-parser-output .fo-crafting-table .selflink,
.mw-parser-output .fo-crafting-table .fo-nonclickable {
    color: var(--fo-nonclickable) !important;
    text-decoration: none !important;
    font-weight: 500;
}