MediaWiki:Vector.css: Difference between revisions

Latest revision as of 21:04, 7 September 2024

/* 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: #15002f87;                 /* inline box color of the content */
    --content-fl-color: #26013ee8;                  /* less transparent floating content box */
    --content-hl-color: #4a0179e0;                  /* highlighted floating content box */
    --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: var(--content-fl-color);         /* 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 */
    }
    .mw-changeslist-legend {
        background-color: transparent;              /* content legend */
    }
    .mw-body-content .infobox {
        background-color: transparent;              /* info box */
    }
    @media screen {
        .wikitable {                                /* content table */
            background-color: transparent;
            color: var(--content-text-color);
            tr > th {
                background-color: var(--content-fl-color);
                color: var(--content-topic-color);
            }
        }
        li.gallerybox div.thumb {                   /* files gallery box */
            background-color: var(--content-fl-color);
        }
    }
    .mw_metadata td {
        background-color: var(--content-box-color); /* file metadata details */
    }
    #filetoc {
        background-color: var(--content-fl-color); /* file header menu */
    }

    /* 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 {
        filter: hue-rotate(190deg) brightness(2.2);
        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 */
    }
    #mw-indicator-mw-helplink a {
        filter: invert(100%);                       /* invert help link icon */
        color: #0010ff;                             /* inverted help link text */
    }
    @media screen {
        .mw-parser-output {              /* external link icon color */
            a.external {
                filter: hue-rotate(190deg) brightness(2.2);
                color: #36c;
            }
            a.external:visited {
                color: #0e50b7;         /* filter is not permitted on visited links */
            }
        }
    }

    /* 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--framed:hover,                                                      /* hovered top search button */
    .cdx-button:enabled.cdx-button--weight-quiet:hover,
    .cdx-button.cdx-button--fake-button--enabled.cdx-button--weight-quiet:hover {   /* hovered top right menu button */
        background-color: var(--button-hl-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: var(--button-hl-color);   /* hovered toggle button */
        color: var(--button-text-color);
    }
    .cdx-button:enabled .cdx-button__icon {
        background-color: var(--button-text-color);   /* button icon, e.g. for "Open in Media Viewer" file options */
    }
    figure > figcaption {
        background-color: #282828;                  /* image description */
    }
    #preferences .mw-htmlform-submit-buttons {
        background-color: var(--content-fl-color);  /* floating preferences save footer */
    }
    #pagehistory li.selected {
        background-color: #a504ff3d;                /* selected page history entry */
        color: var(--content-text-color);
    }

    /* search */
    .cdx-search-input--has-end-button {
        background-color: var(--button-bg-color);   /* top search button */
        color: var(--button-text-color);
    }
    .cdx-menu {
        background-color: var(--content-fl-color);  /* search suggestions box */
        .cdx-menu-item--enabled .cdx-menu-item__content {
            color: var(--content-text-color);
        }
        .cdx-icon {
            color: #ffe453;                         /* search icon */
        }
        .cdx-thumbnail__placeholder {
            background-color: transparent;          /* missing thumbnail placeholder */
        }
    }

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

    /* Extensions */
    table.mw-interwikitable.body td.mw-interwikitable-local-yes {   /* Interwiki data special page */
        background-color: var(--content-hl-color);  /* enabled table cell */
    }
    .mw-mmv-overlay {
        background-color: #00000082;    /* MultimediaViewer background */
    }
    .mw-mmv-post-image {
        background-color: #2a006094;    /* MultimediaViewer file name */
        color: var(--content-text-color);
    }
    .mw-mmv-image-metadata {
        background-color: #00000085;    /* MultimediaViewer details */
    }
}