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 {
    --background-color-base: #363636b2; /* 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 */
    .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: #27c2ff;                 /* 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: #2d2d2d9e;        /* 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 */
        }
    }
}