MediaWiki:Vector-2022.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.
/* ===== Global base: neon dark ===== */
html.skin-vector.skin-vector-2022 {
color-scheme: dark;
background-color: #05060a !important;
}
/* Full-page neon background (optional image) */
html.skin-vector.skin-vector-2022 {
background:
radial-gradient(circle at top left, #1a1f3b 0, #05060a 40%, #000000 100%) fixed !important;
background-size: cover !important;
}
/* If you want a custom image instead, uncomment and adjust:
html.skin-vector.skin-vector-2022 {
background: url("/fractured/images/dark_background.png") no-repeat fixed center !important;
background-size: cover !important;
}
*/
/* Clear default Vector wrappers so background shows edge-to-edge */
body,
.mw-page-container,
.mw-content-container,
.mw-body,
#content {
background: transparent !important;
}
/* Base text */
body {
color: #e5f0ff !important;
font-weight: 400;
}
/* ===== Links: electric blue + neon hover ===== */
a {
color: #4fb3ff !important;
text-decoration: none;
}
a:visited {
color: #9f7bff !important;
}
a:hover,
a:focus {
color: #7ce3ff !important;
text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}
/* ===== Top header / personal tools ===== */
#mw-header,
.vector-header,
.vector-header-container {
background: rgba(5, 6, 10, 0.95) !important;
border-bottom: 1px solid rgba(79, 179, 255, 0.35) !important;
box-shadow: 0 0 18px rgba(79, 179, 255, 0.25);
}
/* User links / personal tools */
#p-personal,
.vector-user-links {
color: #c7d7ff !important;
}
#p-personal a,
.vector-user-links a {
color: #4fb3ff !important;
}
#p-personal a:hover,
.vector-user-links a:hover {
color: #7ce3ff !important;
text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}
/* ===== Sidebar: neon panels ===== */
.vector-sidebar,
.vector-menu,
.vector-menu-content {
background: rgba(8, 10, 18, 0.96) !important;
border-right: 1px solid rgba(159, 123, 255, 0.35) !important;
box-shadow: 0 0 22px rgba(159, 123, 255, 0.35);
}
/* Sidebar section headers */
.vector-menu-heading,
#p-navigation .vector-menu-heading,
#p-tb .vector-menu-heading {
color: #f5f7ff !important;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.78rem;
border-bottom: 1px solid rgba(79, 179, 255, 0.35) !important;
}
/* Sidebar links */
.vector-menu-content-list a {
color: #c7d7ff !important;
}
.vector-menu-content-list a:hover {
color: #7ce3ff !important;
background: radial-gradient(circle at left, rgba(79, 179, 255, 0.25), transparent 60%) !important;
text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}
/* ===== Tabs: page actions (Read / Edit / View history) ===== */
.vector-page-tools,
.vector-page-tools .vector-menu-content {
background: rgba(8, 10, 18, 0.96) !important;
border-left: 1px solid rgba(79, 179, 255, 0.35) !important;
}
/* Tabs themselves */
.vector-page-tools .vector-menu-content-list li a {
color: #c7d7ff !important;
border-radius: 999px;
padding: 4px 12px;
border: 1px solid transparent;
}
/* Active tab */
.vector-page-tools .vector-menu-content-list li.selected a,
.vector-page-tools .vector-menu-content-list li.selected a:visited {
color: #ffffff !important;
background: linear-gradient(135deg, #4fb3ff, #9f7bff) !important;
border-color: rgba(124, 227, 255, 0.7) !important;
box-shadow: 0 0 12px rgba(124, 227, 255, 0.8);
}
/* Hover tabs */
.vector-page-tools .vector-menu-content-list li a:hover {
border-color: rgba(79, 179, 255, 0.6) !important;
background: radial-gradient(circle at center, rgba(79, 179, 255, 0.25), transparent 70%) !important;
text-shadow: 0 0 6px rgba(124, 227, 255, 0.8);
}
/* ===== Search box: neon input ===== */
#p-search,
.vector-search-box {
background: rgba(8, 10, 18, 0.96) !important;
border-radius: 999px;
padding: 2px 10px;
border: 1px solid rgba(79, 179, 255, 0.5) !important;
box-shadow: 0 0 14px rgba(79, 179, 255, 0.4);
}
.vector-search-box input {
background: transparent !important;
border: none !important;
color: #e5f0ff !important;
}
.vector-search-box input::placeholder {
color: #7b8bb5 !important;
}
.vector-search-box button,
.vector-search-box .mw-ui-button {
background: linear-gradient(135deg, #4fb3ff, #9f7bff) !important;
border-radius: 999px !important;
border: none !important;
color: #05060a !important;
font-weight: 600;
box-shadow: 0 0 12px rgba(124, 227, 255, 0.9);
}
.vector-search-box button:hover,
.vector-search-box .mw-ui-button:hover {
filter: brightness(1.15);
}
/* ===== Content area ===== */
#content,
.mw-body {
background: rgba(8, 10, 18, 0.92) !important;
border-radius: 12px;
border: 1px solid rgba(79, 179, 255, 0.35) !important;
box-shadow: 0 0 24px rgba(79, 179, 255, 0.35);
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
color: #f5f7ff !important;
text-shadow: 0 0 8px rgba(159, 123, 255, 0.6);
}
/* ===== Buttons / standard UI elements ===== */
.mw-ui-button,
.mw-ui-button.mw-ui-progressive {
background: linear-gradient(135deg, #4fb3ff, #9f7bff) !important;
border-radius: 999px !important;
border: none !important;
color: #05060a !important;
font-weight: 600;
box-shadow: 0 0 12px rgba(124, 227, 255, 0.9);
}
.mw-ui-button:hover,
.mw-ui-button.mw-ui-progressive:hover {
filter: brightness(1.12);
}
/* Secondary buttons */
.mw-ui-button.mw-ui-quiet,
.mw-ui-button.mw-ui-neutral {
background: transparent !important;
border-radius: 999px !important;
border: 1px solid rgba(159, 123, 255, 0.6) !important;
color: #c7d7ff !important;
}
.mw-ui-button.mw-ui-quiet:hover,
.mw-ui-button.mw-ui-neutral:hover {
background: radial-gradient(circle at center, rgba(159, 123, 255, 0.25), transparent 70%) !important;
}
/* ===== Tables / infoboxes ===== */
table,
.infobox,
.mw-parser-output table {
background: rgba(8, 10, 18, 0.96) !important;
border: 1px solid rgba(79, 179, 255, 0.35) !important;
}
th,
td {
border-color: rgba(79, 179, 255, 0.25) !important;
}
/* ===== Footer ===== */
#footer,
.vector-footer {
background: rgba(5, 6, 10, 0.95) !important;
border-top: 1px solid rgba(79, 179, 255, 0.35) !important;
color: #7b8bb5 !important;
}