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 */
/* 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: #00000050; /* darken 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: #00000050; /* darken content toolbar background */
padding: 0px 16px; /* pad content toolbar background */
}
#bodyContent {
background-color: #00000050; /* darken content background */
padding: 0px 16px; /* pad content background */
}
}
/* Page Content */
.mw-heading, .vector-menu-heading, h1, h2, h3, h4, h5, h6 {
color: white; /* topic color */
}
li::marker {
color: #f0f0f0; /* wiki page list marker color */
}
ul {
list-style-image: none; /* remove black list item image */
}
.mw-footer li {
color: #f0f0f0; /* footer color */
}
code, .mw-code {
background-color: #2d2d2d; /* code box color */
color: #f0f0f0; /* code font color */
}
.catlinks {
background-color: #202020; /* 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: #606060; /* hovered top menu button color */
}
.vector-dropdown-content {
background-color: #3a0e0e; /* popup menu background */
}
button.cdx-button, button.cdx-button:enabled {
background-color: #202020; /* toggle button */
color: #f0f0f0;
}
button.cdx-button:enabled:hover {
background-color: #606060; /* hovered toggle button */
color: white;
}
figure > figcaption {
background-color: #282828; /* image description */
}
/* Menu Alignment Fixtures */
.mw-page-container-inner {
margin-left: -11px; /* compensate menu margin */
}
.vector-pinned-container {
background-color: #55555521; /* 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: #601b1b;
left: -28px; /* prevent collapse button overlapping */
}
}
/* 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;
}
/* popup with clipped bottom arrow */
.mwe-popups-container {
background-color: #260535; /* color popup background */
border: solid 2px #461159; /* color border for better visibility */
border-bottom: 10px solid #461159; /* color clipped bottom border */
.mwe-popups-extract {
margin-bottom: 8px; /* reduce settings icon spacing */
}
.mwe-popups-extract::after {
background-image: linear-gradient(to right,rgba(255,255,255,0),#260535 50%); /* adjust text fade-out color */
}
.cdx-button {
filter: invert(100%); /* invert settings icon color */
-webkit-filter: invert(100%);
}
footer {
padding: 0 16px 8px; /* adjust for bottom-border */
}
}
/* popup with clipped top arrow */
&.mwe-popups-is-not-tall .mwe-popups-container {
padding-top: 0px; /* fix top padding */
border-top: 10px solid #461159; /* color clipped top border */
.mwe-popups-extract { /* clipped top arrow */
margin-bottom: 20px; /* reduce settings icon spacing */
}
footer {
padding: 0 16px; /* restore bottom-border */
}
}
}
}