MediaWiki:Common.css: Difference between revisions

Revision as of 10:11, 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: #9dff77;
    --fo-link-hover: #d7ffc6;
    --fo-muted: #4f8f3d;
}

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;
}

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;
}

#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: #7ee160 !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;
}

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;
}


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