MediaWiki:Common.css

From Fonline2 Wiki
Revision as of 10:17, 26 May 2026 by Wesan (talk | contribs)
Jump to navigation Jump to search

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

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

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

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


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


/* 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;
}
Retrieved from "https://wiki.fonline2.com/index.php?title=MediaWiki:Common.css&oldid=151"