MediaWiki:Vector.css

/*
 * This stylesheet modifies the Vector theme.
 * 
 * Common styles should go in [[MediaWiki:Common.css]].
 */

/* ===== Fonts ===== */
@font-face {
    font-family: 'Fontin';
    src: local('Fontin Regular'), url(/w/media/Fontin-Regular.ttf) format('truetype');
}
@font-face {
    font-family: 'Fontin';
    src: local('Fontin Bold'), url(/w/media/Fontin-Bold.ttf) format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: 'Fontin';
    src: local('Fontin Italic'), url(/w/media/Fontin-Italic.ttf) format('truetype');
    font-style: italic;
}
@font-face {
    font-family: 'FontinSmallCaps';
    src: local('Fontin SmallCaps'), url(/w/media/Fontin-SmallCaps.ttf) format('truetype');
}

/* ===== Variables ===== */
:root {
    color-scheme: dark;

    --default-font: Verdana, Arial, Helvetica, sans-serif;
    --stylized-font: Fontin, Verdana, Arial, Helvetica, sans-serif;
    --stylized-smallcaps-font: FontinSmallCaps, Verdana, Arial, Helvetica, sans-serif;
    --monospace-font: "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", "Liberation Mono", monospace;

    --content-background-color: #171717;

    --text-color: #a38d6d;
    --bright-text-color: #dfcf99;
    --subdued-text-color: #5e4f45;

    /* Links */
    --link-color: #e4dc75;
    --link-active-color: #f2dcae;
    --red-link-color: #f25749;
    --red-link-active-color: #f2b4ae;

    /* Tables */
    --table-border-color: #1a1812;
    --table-text-color: var(--text-color);
    --table-background-color: #26231b;
    --table-background-color-alt: #211F18;
    --table-header-text-color: var(--text-color);
    --table-header-background-color: #332f24;

    --horizontal-rule-color: #5e4f45;

    /* Image boxes */
    --image-box-border-color: #68604a;
    --image-box-background-color: #201f19;
    --image-box-inner-border-color: #454034;
    --image-box-inner-background-color: #13120f;

    /* Outside of main content area */
    --outer-text-color: #c6bbb3;
    --outer-link-color: #e8e6e3;
    --outer-link-text-shadow: 0 0 0.5rem rgba(0, 0, 0, 1), -1px -1px 0 rgba(0, 0, 0, 0.25), 1px -1px 0 rgba(0, 0, 0, 0.25), -1px 1px 0 rgba(0, 0, 0, 0.25), 1px 1px 0 rgba(0, 0, 0, 0.25);
}

/* ===== Body ===== */
@media screen {
    body {
        font-family: var(--default-font);
        background: #000 url(/w/images/9/98/Bg.jpg) no-repeat fixed left top;
        background-size: contain;
    }
}

/* ===== Links ===== */
@media screen {
    a,
    a:visited,
    .mw-parser-output a.extiw,
    .mw-parser-output a.extiw:visited,
    .mw-parser-output a.external,
    .mw-parser-output a.external:visited {
        color: var(--link-color);
    }
    a:active,
    .mw-parser-output a.extiw:active,
    .mw-parser-output a.external:active {
        color: var(--link-active-color);
    }
    a.new,
    a.new:visited {
        color: var(--red-link-color);
    }
    a.new:active {
        color: var(--red-link-active-color);
    }
}

/* ===== Section headings ===== */
@media screen {
    .mw-body h1,
    .mw-body h2,
    .mw-body h3,
    .mw-body h4,
    .mw-body h5,
    .mw-body h6 {
        font-family: var(--stylized-font);
        color: var(--bright-text-color);
    }
    .mw-body h1,
    .mw-body h2 {
        border-bottom-color: var(--horizontal-rule-color);
    }

    /* Edit section and similarly styled links */
    .mw-editsection,
    .mw-editsection-like {
        font-family: var(--default-font);
        font-size: 12px;
        color: var(--subdued-text-color);
    }
}

/* ===== Content elements ===== */
@media screen {
    .mw-body hr {
        color: var(--horizontal-rule-color);
        background-color: var(--horizontal-rule-color);
    }
}

/* ===== Header ===== */
#mw-page-base {
    height: 0;
    background: transparent;
}
#mw-head-base,
#mw-head {
    margin: 0;
    height: 80px;
}
#left-navigation {
    margin-top: 53px;
    margin-bottom: -50px;
    padding-left: 12px;
}
#right-navigation {
    margin-top: 53px;
    margin-right: 16px;
}

/* ===== Menu tabs ===== */
div#mw-head .vector-menu-tabs,
div#mw-head .vector-menu-dropdown {
    background: transparent;
    padding: 0;
    height: 26px;
}
div#mw-head .vector-menu-tabs a,
div#mw-head .vector-menu-dropdown a,
div#mw-head .vector-menu-dropdown .vector-menu-heading {
    color: var(--link-color);
}
div#mw-head .vector-menu-tabs a:active,
div#mw-head .vector-menu-dropdown a:active {
    color: var(--link-active-color);
}
div#mw-head .vector-menu-tabs .new a,
div#mw-head .vector-menu-tabs .new a:visited {
    color: var(--red-link-color);
}
div#mw-head .vector-menu-tabs .new a:active {
    color: var(--red-link-active-color);
}
div#mw-head .vector-menu-tabs li,
div#mw-head .vector-menu-dropdown .vector-menu-heading {
    background-color: transparent;
    background-image: url(/w/images/c/c1/Vector_tab_left.png), url(/w/images/0/07/Vector_tab_right.png);
    background-position: left top, right top;
    background-repeat: no-repeat;
    background-size: auto;
}
div#mw-head .vector-menu-dropdown .vector-menu-heading {
    margin: 0;
    padding: 0;
    height: 100%;
}
div#mw-head .vector-menu-dropdown .vector-menu-heading::after {
    content: none;
    display: none;
}
div#mw-head .vector-menu-tabs li.selected,
div#mw-head .vector-menu-dropdown:hover .vector-menu-heading,
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading {
    background-position: left bottom, right bottom;
}
div#mw-head .vector-menu-tabs li.selected a,
div#mw-head .vector-menu-dropdown:hover .vector-menu-heading span,
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading span {
    background-position: center bottom;
}
div#mw-head .vector-menu-tabs li a,
div#mw-head .vector-menu-dropdown .vector-menu-heading span {
    display: inline-block;
    float: none;
    padding: 0 18px;
    height: 100%;
    font-family: var(--stylized-smallcaps-font);
    font-size: 16px;
    line-height: 26px;
    font-variant-ligatures: none;
    background-color: transparent;
    text-decoration: none;
    background-image: url(/w/images/a/ad/Vector_tab_center.png);
    background-position: center top;
    background-repeat: repeat-x;
    background-clip: content-box;
    background-size: auto;
}
div#mw-head .vector-menu-dropdown .vector-menu-heading span::after {
    content: "";
    display: inline-block;
    margin-right: -6px;
    width: 1em;
    height: 1em;
    vertical-align: middle;
    background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 320 512'><path d='M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z' fill='%23f2c462'/></svg>");
    transition: transform 0.15s ease-in;
}
div#mw-head .vector-menu-dropdown .vector-menu-checkbox:checked + .vector-menu-heading span::after {
    transform: rotate(-0.5turn);
}
div#mw-head .vector-menu-dropdown .vector-menu-content {
    right: 0;
    top: 26px;
    border: 1px solid #875b3a;
    border-top-color: #734e32;
    border-radius: 0 0 6px 6px;
    width: fit-content;
    background: linear-gradient(to bottom, #7c5436 0%, #47301e 100%);
    box-shadow: -2px 5px 5px rgba(0, 0, 0, 0.5);
}

div#mw-head .vector-menu-tabs #ca-unwatch.icon a,
div#mw-head .vector-menu-tabs #ca-watch.icon a {
    width: 42px;
    text-indent: -9999em;
    vertical-align: middle;
}
div#mw-head .vector-menu-tabs #ca-unwatch.icon a::before,
div#mw-head .vector-menu-tabs #ca-watch.icon a::before {
    content: "";
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
}
div#mw-head .vector-menu-tabs #ca-unwatch.icon a::before {
    background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 576 512'><path d='M259.3 17.8L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0z' fill='%23f2c462'/></svg>");
}
div#mw-head .vector-menu-tabs #ca-watch.icon a::before {
    background-image: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 576 512'><path d='M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z' fill='%23f2c462'/></svg>");
}

/* ===== User menu ===== */
@media screen {
    .vector-user-menu-legacy a,
    .vector-user-menu-legacy a:visited{
        color: var(--outer-link-color);
        text-shadow: var(--outer-link-text-shadow);
    }
    .vector-user-menu-legacy #pt-anonuserpage,
    .vector-user-menu-legacy #pt-userpage a {
        background-position: left bottom;
    }
}

/* ===== User menu ===== */
@media screen {
    .vector-user-menu-legacy a,
    .vector-user-menu-legacy a:visited{
        color: var(--outer-link-color);
        text-shadow: var(--outer-link-text-shadow);
    }
    .vector-user-menu-legacy #pt-anonuserpage,
    .vector-user-menu-legacy #pt-userpage a {
        background-position: left bottom;
    }
}

/* ===== Sidebar menu ===== */
@media screen {
    .vector-legacy-sidebar .vector-menu-portal {
        background-color: rgba(0,0,0,0.3);
    }
    .vector-legacy-sidebar .vector-menu-portal .vector-menu-heading {
        color: var(--outer-text-color);
    }
    .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a,
    .vector-legacy-sidebar .vector-menu-portal .vector-menu-content li a:visited {
        color: var(--outer-link-color);
        text-shadow: var(--outer-link-text-shadow);
    }
}

/* ===== Footer ===== */
@media screen {
    .mw-footer li {
        color: var(--outer-text-color);
    }
    .mw-footer a {
        color: var(--outer-link-color);
        text-shadow: var(--outer-link-text-shadow);
    }
}

/* ===== Page content ===== */
@media screen {
    .mw-body {
        border: 2px solid #4c3c2c;
        border-image-source: radial-gradient(at top center, #736445, #3d3326, #402f27, #3f372a, #0c0b09);
        border-image-slice: 1;
        color: var(--text-color);
        background-color: var(--content-background-color);
        box-shadow: 0 1.5rem 3rem rgba(0,0,0,0.5);
    }
}

/* ===== Revision history ===== */
#pagehistory li {
    border: 1px solid transparent;
    padding: 0;
}
#pagehistory li.selected {
    outline: none;
    border: 1px dashed #16678a;
    color: inherit;
    background-color: #191b1c;
}

/* ===== Table of contents ===== */
@media screen {
    .toc,
    .toccolours {
        background: #141414;
        border-color: #a38d6d;
    }
    .toctogglelabel {
        color: var(--link-color);
    }
    .tocnumber {
        color: #72777d;
    }
}

/* ===== Thumbnail/framed images ===== */
@media screen {
    figure[typeof~="mw:File/Thumb"],
    figure[typeof~="mw:File/Frame"],
    figure[typeof~="mw:File/Thumb"] > figcaption,
    figure[typeof~="mw:File/Frame"] > figcaption {
        border-color: var(--image-box-border-color);
        background-color: var(--image-box-background-color);
    }
    figure[typeof~="mw:File/Thumb"] > a:first-child > :first-child:not(.mw-broken-media),
    figure[typeof~="mw:File/Frame"] > a:first-child > :first-child:not(.mw-broken-media),
    figure[typeof~="mw:File/Thumb"] > span:first-child > :first-child:not(.mw-broken-media),
    figure[typeof~="mw:File/Frame"] > span:first-child > :first-child:not(.mw-broken-media) {
        border-color: var(--image-box-inner-border-color);
        background-color: var(--image-box-inner-background-color);
    }
    .mw-content-ltr figure[typeof~='mw:File/Thumb']:not([typeof~='mw:Error']) > a.mw-file-description:after {
        filter: invert(1);
    }
}

/* ===== Gallery images ===== */
@media screen {
    li.gallerybox div.thumb {
        border-color: var(--image-box-border-color);
        background-color: var(--image-box-background-color);
    }
}

/* ===== Standard tables ===== */
@media screen {
    .wikitable {
        color: var(--table-text-color);
        background-color: var(--table-background-color);
    }
    .wikitable > tr > th,
    .wikitable > * > tr > th {
        color: var(--bright-text-color);
        background-color: var(--table-header-background-color);
    }
    .wikitable > tr:nth-child(even) > td,
    .wikitable > * > tr:nth-child(even) > td {
        background-color: var(--table-background-color-alt);
    }
    .wikitable > tr > th,
    .wikitable > tr > td,
    .wikitable > * > tr > th,
    .wikitable > * > tr > td {
         border: 1px solid var(--table-border-color);
    }
}

/* ===== Table sorting arrows ===== */
.client-js .sortable:not(.jquery-tablesorter) > * > tr:first-child > th:not(.unsortable),
.jquery-tablesorter th.headerSort {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMjEgOSI+Cgk8cGF0aCBkPSJtMTQuNSA1LTQgNC00LTR6bTAtMS00LTQtNCA0eiIgc3R5bGU9ImZpbGw6I2RmY2Y5OTsiLz4KPC9zdmc+");
}
.jquery-tablesorter th.headerSortUp {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgMjEgNCI+Cgk8cGF0aCBkPSJtNi41IDQgNC00IDQgNHoiIHN0eWxlPSJmaWxsOiNkZmNmOTk7Ii8+Cjwvc3ZnPg==");
}
.jquery-tablesorter th.headerSortDown {
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMSIgaGVpZ2h0PSI0IiB2aWV3Qm94PSIwIDAgMjEgNCI+Cgk8cGF0aCBkPSJtMTQuNSAwLTQgNC00LTR6IiBzdHlsZT0iZmlsbDojZGZjZjk5OyIvPgo8L3N2Zz4=");
}

/* ===== Revision comparison ===== */
.diff-lineno,
.diff td.diff-marker {
    color: var(--bright-text-color);
}
.mw-diff-movedpara-left::after,
.mw-diff-movedpara-right::after {
    color: var(--bright-text-color);
}
.diff td {
    padding: 0.15em 0.3em;
}
.diff-addedline,
.diff-deletedline,
.diff-context {
    border-radius: 0.3em;
}
.diff-editfont-monospace .diff-addedline,
.diff-editfont-monospace .diff-deletedline,
.diff-editfont-monospace .diff-context {
    font-family: var(--monospace-font);
}
.diff-context {
    border-color: #2c2b2b;
    color: var(--subdued-text-color);
    background: #141414;
}
.diff-deletedline {
    border-color: #894a17;
    background: #191b1c;
}
.diff-deletedline .diffchange {
    color: var(--bright-text-color);
    background: #4d3420;
}
.diff-addedline {
    border-color: #16678a;
    background: #191b1c;
}
.diff-addedline .diffchange {
    color: var(--bright-text-color);
    background: #203f4c;
}

/* ===== Code-like elements, syntax highlighting, Ace editor ===== */
@media screen {
    pre,
    code,
    tt,
    kbd,
    samp,
    .mw-code,
    .mw-editfont-monospace,
    .wikiEditor-ui .ace_editor {
        font-family: var(--monospace-font);
    }
    pre,
    code,
    .mw-code,
    .ace-tm,
    .mw-highlight {
        color: #cecbc6;
        background-color: #242321;
    }
    pre,
    code,
    .mw-code {
        border: 1px solid #49483e;
    }
    .ace-tm .ace_gutter {
        background: #2e2d2a;    
    }
    .mw-content-ltr.mw-highlight-lines pre,
    .mw-content-ltr.content .mw-highlight-lines pre {
        box-shadow: inset 2.75em 0 0 #2e2d2a;
    }
    .ace-tm .ace_gutter-cell,
    .mw-highlight .linenos {
        color: #8f908a;
    }
    .ace-tm .ace_print-margin {
        width: 1px;
        background: #555651;
    }
    .ace-tm .ace_cursor {
        color: #f8f8f0;
    }
    .ace-tm .ace_marker-layer .ace_selection {
        background: #49483e;
    }
    .ace-tm.ace_multiselect .ace_selection.ace_start {
        box-shadow: 0 0 3px 0px #272822;
    }
    .ace-tm .ace_marker-layer .ace_step {
        background: rgb(102, 82, 0);
    }
    .ace-tm .ace_marker-layer .ace_bracket {
        border: 1px solid #49483e;
        margin: -1px 0 0 -1px;
    }
    .ace-tm .ace_marker-layer .ace_active-line,
    .mw-highlight .hll {
        background: #1e1d1c;
    }
    .ace-tm .ace_gutter-active-line,
    .mw-highlight .hll a .linenos {
        background-color: #282725;
    }
    .ace-tm .ace_gutter-active-line,
    .mw-highlight .hll a .linenos,
    .mw-highlight a:hover .linenos {
        color: #fff;
    }
    .ace-tm .ace_marker-layer .ace_selected-word {
        border: 1px solid #49483e;
    }
    .ace-tm .ace_invisible {
        color: #52524d;
    }
    .ace-tm .ace_constant,
    .ace-tm .ace_entity.ace_name.ace_tag,
    .ace-tm .ace_keyword,
    .ace-tm .ace_meta.ace_tag,
    .ace-tm .ace_storage,
    .mw-highlight .k,
    .mw-highlight .kr,
    .mw-highlight .ow,
    .mw-highlight .nt {
        color: #f92672;
    }
    .ace-tm .ace_keyword.ace_operator,
    .mw-highlight .o {
        color: #828282;
    }
    .ace-tm .ace_punctuation,
    .ace-tm .ace_punctuation.ace_tag,
    .mw-highlight .p,
    .mw-highlight .nc,
    .mw-highlight .nf,
    .mw-highlight .nv,
    .mw-highlight .nd {
        color: inherit;
    }
    .ace-tm .ace_constant.ace_character,
    .ace-tm .ace_constant.ace_language,
    .ace-tm .ace_constant.ace_numeric,
    .ace-tm .ace_constant.ace_other,
    .mw-highlight .mi,
    .mw-highlight .mf,
    .mw-highlight .mh,
    .mw-highlight .kc {
        color: #ae81ff;
    }
    .ace-tm .ace_invalid {
        color: #f8f8f0;
        background-color: #f92672;
    }
    .ace-tm .ace_invalid.ace_deprecated {
        color: #f8f8f0;
        background-color: #ae81ff;
    }
    .ace-tm .ace_support.ace_constant,
    .ace-tm .ace_support.ace_function,
    .mw-highlight .bp {
        color: #66d9ef;
    }
    .ace-tm .ace_fold {
        border-color: #f8f8f2;
        background-color: #a6e22e;
    }
    .ace-tm .ace_storage.ace_type,
    .ace-tm .ace_support.ace_class,
    .ace-tm .ace_support.ace_type,
    .mw-highlight .kd,
    .mw-highlight .kp,
    .mw-highlight .kt {
        font-style: italic;
        color: #66d9ef;
    }
    .ace-tm .ace_entity.ace_name.ace_function,
    .ace-tm .ace_entity.ace_other,
    .ace-tm .ace_entity.ace_other.ace_attribute-name,
    .ace-tm .ace_variable,
    .ace-tm .ace_comment.ace_doc.ace_tag,
    .ace-tm .ace_constant.ace_library,
    .mw-highlight .nb,
    .mw-highlight .nn {
        color: #a6e22e;
    }
    .ace-tm .ace_variable.ace_parameter,
    .mw-highlight .cp {
        font-style: italic;
        color: #fd971f;
    }
    .ace-tm .ace_string,
    .mw-highlight .s,
    .mw-highlight .s1,
    .mw-highlight .s2,
    .mw-highlight .se,
    .mw-highlight .sx {
        color: #e6db74;
    }
    .ace-tm .ace_comment,
    .ace-tm .ace_comment.ace_doc,
    .mw-highlight .c,
    .mw-highlight .c1,
    .mw-highlight .cm {
        color: #75715e;
    }
    .ace-tm .ace_indent-guide {
        filter: brightness(0.5);
    }
}

/* ===== Cargo ===== */
@media screen {
    .cargo-pagevalues-tableinfo {
        border: none;
        background-color: var(--content-background-color);
    }
    .mw-datatable,
    .mw-datatable th,
    .mw-datatable td {
        border: 1px solid var(--table-border-color);
    }
    .mw-datatable th {
        color: var(--bright-text-color);
        background-color: var(--table-header-background-color);
    }
    .mw-datatable td,
    .mw-datatable tr:hover td {
        background-color: var(--table-background-color);
    }
    .mw-datatable > tr:nth-child(even) > td,
    .mw-datatable > * > tr:nth-child(even) > td {
        background-color: var(--table-background-color-alt);
    }
    .mw-datatable th .oo-ui-iconElement-icon {
        /* black -> #dfcf99 */
        filter: invert(94%) sepia(12%) saturate(1025%) hue-rotate(346deg) brightness(93%) contrast(88%);
    }
    table.cargoTable th,
    table.cargoTable td {
        border: 1px solid var(--table-border-color);
    }
    table.cargoTable th {
        color: var(--bright-text-color);
        background-color: var(--table-header-background-color);
    }
    table.cargoTable.noMerge tr:nth-child(even),
    table.cargoTable.mergeSimilarCells td.even {
        background-color: var(--table-background-color);
    }
    table.cargoTable.noMerge tr:nth-child(odd),
    table.cargoTable.mergeSimilarCells td.odd {
        background: var(--table-background-color-alt);
    }
}