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.

/* 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: #040704;
    --fo-bg-soft: #0a120a;
    --fo-surface: #081008;
    --fo-surface-2: #0c160c;
    --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%, #0a140a 0%, #071007 36%, #040704 100%) !important;
    color: var(--fo-text) !important;
    font-family: 'Exo', Tahoma, Verdana, sans-serif !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(10, 18, 10, 0.95), rgba(6, 10, 6, 0.95)) !important;
    border: 1px solid var(--fo-border) !important;
    box-shadow: 0 0 0 1px rgba(86, 168, 74, 0.22), inset 0 0 42px rgba(0, 0, 0, 0.42) !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;
}