MediaWiki:Vector.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)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* Dark BOTF-Wiki style for the Vector skin. */
/* Globally applied through MediaWiki:Vector.css page. */
/* Editing requires interface administrator permission. */
.skin-vector-2022 {
--background-color-base: #000000b2; /* wiki background color */
background-color: #202020; /* outer background color */
color: #f0f0f0; /* wiki page font color */
/* local variables used by this skin */
--content-bg-color: #00000050; /* main content container background */
--sidebar-bg-color: var(--content-bg-color); /* sidebar container background */
--content-topic-color: white; /* content topic font color */
--content-text-color: #f0f0f0; /* content text font color */
--content-box-color: #202020; /* inline box color of the content */
--button-bg-color: none; /* menu button background color */
--button-fl-color: #330055b5; /* floating menu button background color */
--button-hl-color: #6100a4a1; /* top-right menu button hover color */
--button-text-color: var(--content-text-color); /* menu button text color */
--toc-button-bg-color: #550023; /* table-of-contents collapse button background 420060; */
--toc-button-hl-color: #ae004a; /* table-of-contents collapse button hover color */
--menu-bg-color: #360244d4; /* popup menu background color */
--menu-link-color: #ffe453; /* popup menu link color */
--menu-vlink-color: #ffa42e; /* popup menu visited link color */
/* Background */
&.mediawiki.ltr {
background-image: url(/botf/wiki/images/background/Freezerondigital-Space-Backgrounds/Space-Background-Image-3.jpg);
background-attachment: fixed;
background-position: center;
}
/* Page Content Container */
.mw-content-container {
.vector-page-titlebar {
background-color: var(--content-bg-color); /* header line background */
padding: 5px 16px 0px 16px; /* pad header line background */
}
.vector-page-titlebar::after {
margin: 0px 16px; /* align header underline */
}
.vector-page-toolbar {
background-color: var(--content-bg-color); /* content toolbar background */
padding: 0px 16px; /* pad content toolbar background */
}
#bodyContent {
background-color: var(--content-bg-color); /* content background */
padding: 0px 16px; /* pad content background */
}
}
/* Page Content */
.mw-heading, .vector-menu-heading, h1, h2, h3, h4, h5, h6 {
color: var(--content-topic-color); /* topic color */
}
li::marker {
color: var(--content-text-color); /* wiki page list marker color */
}
ul {
list-style-image: none; /* remove black list item image */
}
.mw-footer li {
color: var(--content-text-color); /* footer color */
}
code, .mw-code {
background-color: var(--content-box-color); /* code box color */
color: var(--content-text-color); /* code font color */
}
.catlinks {
background-color: var(--content-box-color); /* category links footer */
}
/* Link Colors */
a, a.external:not(.text), .vector-pinnable-element .mw-list-item a,
.vector-menu-tabs .mw-list-item a, .vector-toc .vector-toc-link {
color: #ffe453; /* link color */
}
a:visited, .vector-pinnable-element .mw-list-item a:visited,
.vector-menu-tabs .mw-list-item a:visited {
color: #ffa42e; /* visited link color */
}
a.external.text {
color: #36c;
filter: hue-rotate(190deg) brightness(2.2); /* external link text & icon color */
}
a:visited.external.text, .mw-parser-output a:visited.external.text {
color: #36c;
filter: hue-rotate(150deg) brightness(2); /* visited external link text & icon color */
}
/* Menu Items */
.vector-menu-tabs .mw-list-item.selected a, .vector-menu-tabs .mw-list-item.selected a:visited {
color: #e63213; /* selected menu tabs*/
}
.vector-dropdown label::after {
filter: invert(100%); /* invert dropdown icon color */
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link {
color: #ffa42e; /* active contents link color */
}
.vector-toc .vector-toc-level-1-active > .vector-toc-link {
color: #ffa42e; /* active parent link color */
}
#pt-userpage-2 a {
color: #ffe453; /* top user page link color */
}
.vector-icon {
filter: invert(100%); /* invert icon colors */
-webkit-filter: invert(100%);
}
/* Components */
.oo-ui-window-frame {
color: black; /* for VisualEditor save and other dialogs */
}
.vector-dropdown .cdx-button:enabled, .vector-dropdown .cdx-button.cdx-button--fake-button--enabled {
color: #ff4ff4; /* dropdown text color */
}
.cdx-button:enabled.cdx-button--weight-quiet:hover, .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {
background-color: var(--button-hl-color); /* hovered top right menu button color */
}
.cdx-button.cdx-button--fake-button--enabled {
background-color: var(--button-bg-color); /* menu button */
color: var(--button-text-color);
}
.vector-below-page-title .vector-page-titlebar-toc .cdx-button.cdx-button--fake-button--enabled {
background-color: var(--button-fl-color); /* scrolled down top-left mobile menu button */
}
.vector-dropdown-content {
background-color: var(--menu-bg-color); /* popup menu background */
.mw-list-item a {
color: var(--menu-link-color); /* popup menu link color */
&:visited {
color: var(--menu-vlink-color);
}
}
}
button.cdx-button, button.cdx-button:enabled {
background-color: var(--button-bg-color); /* toggle button */
color: var(--button-text-color);
}
button.cdx-button:enabled:hover {
background-color: #606060; /* hovered toggle button */
color: white;
}
figure > figcaption {
background-color: #282828; /* image description */
}
#preferences .mw-htmlform-submit-buttons {
background-color: var(--button-fl-color); /* floating preferences save footer */
}
/* Menu Alignment Fixtures */
.mw-page-container-inner {
margin-left: -11px; /* compensate menu margin */
}
.vector-pinned-container {
background-color: var(--sidebar-bg-color); /* left and right tool boxes */
margin-left: 11px; /* prevent collapse button to be cut off */
padding: 8px 15px; /* increase pinned container padding */
}
.vector-toc .vector-pinnable-header {
margin-left: 0px; /* fix left contents menu pedding */
}
.vector-toc .vector-toc-list-item {
padding-left: 0px; /* fix left contents menu pedding */
}
.vector-column-start .vector-sticky-pinned-container {
margin-left: 0px; /* fix left contents menu alignment */
}
.vector-sticky-pinned-container::after {
margin-left: 11px; /* match .vector-pinned-container */
background: none; /* remove empty gradient stripes */
}
/* Fix Overlapping Collapse Button */
.vector-toc-list-item {
/* .vector-toc-link:has(+ .cdx-button) {
margin-left: 16px;
} */
.vector-toc-list {
/* margin-left: 16px; */
font-size: 0.87em; /* reduce sub-topic items */
line-height: 0.87em;
}
button.cdx-button.vector-toc-toggle {
background-color: var(--toc-button-bg-color);
left: -28px; /* prevent collapse button overlapping */
&:hover {
background-color: var(--toc-button-hl-color);
}
}
}
/* Fix Footer Spacing */
#footer-icons li a {
margin-left: 8px; /* add some footer icon spacing */
}
/* Popup Colors */
.mwe-popups {
background: transparent;
color: white; /* change text color */
a, a:visited {
color: white;
}
.popups-icon {
filter: invert(100%); /* invert settings & notification icon color */
-webkit-filter: invert(100%); /* for: "There was an issue displaying this preview" */
}
.mwe-popups-container {
background-color: #260535; /* color popup background */
border: solid 2px #461159; /* color border for better visibility */
.mwe-popups-extract::after {
background-image: linear-gradient(to right,rgba(255,255,255,0),#260535 50%); /* adjust text fade-out color */
}
footer {
padding: 0 16px 8px; /* adjust for bottom-border */
}
.mwe-popups-extract {
margin-bottom: 20px; /* reduce settings icon spacing */
/* Note that some spacing is needed for the "Go to this page" text,
when there was an issue displaying the preview. ( when articles have no introduction ) */
}
}
/* popup with clipped top arrow */
&:not(.flipped-x-y, .flipped-y) {
.mwe-popups-container {
padding-top: 0px; /* fix top padding */
border-top: 10px solid #461159; /* color clipped top border */
}
}
/* popup with clipped bottom arrow */
&.flipped-x-y, &.flipped-y {
.mwe-popups-container {
border-bottom: 10px solid #461159; /* color clipped bottom border */
}
}
}
}