MediaWiki:Vectordark.css: Difference between revisions

From Official Factorio Wiki
Jump to navigation Jump to search
(removed css that is definitely double with the default)
(removed even more unused css, more more tab arrow visible and right color, added right border to more tab)
Line 141: Line 141:
     }
     }
     div#mw-head #right-navigation div.vectorMenu h3 {
     div#mw-head #right-navigation div.vectorMenu h3 {
         background: inherit
         background-color: #1f1f1f;
        background-image: -moz-linear-gradient(top,#333 5%,#1f1f1f 60%);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(5%,#333),color-stop(60%,#1f1f1f));
        background-image: -webkit-linear-gradient(top,#333 5%,#1f1f1f 60%);
        background-image: linear-gradient(#333 5%,#1f1f1f 60%);
        background-size: 1px
     }
     }
     div#mw-head div.vectorMenu h3 span {
     div#mw-head div.vectorMenu h3 span {
Line 162: Line 167:
     }
     }
     div.vectorMenu#p-cactions div.menu {
     div.vectorMenu#p-cactions div.menu {
         border-color: #666
         border-color: #333;
        margin-top: 1px;
     }
     }
     div.vectorMenu#p-cactions ul {
     div.vectorMenu#p-cactions ul {
Line 271: Line 277:
         transition: margin-left 250ms
         transition: margin-left 250ms
     }
     }
     #p-personal {
     /* #pt-userpage,
        position: absolute;
        top: .33em;
        right: .75em;
        z-index: 100
    }
    #p-personal h3 {
        display: none
    }
    #p-personal ul {
        list-style-type: none;
        list-style-image: none;
        margin: 0;
        padding-left: 10em
    }
    #p-personal li {
        line-height: 1.125em;
        float: left;
        margin-left: .75em;
        margin-top: .5em;
        font-size: .75em;
        white-space: nowrap
    }
    #pt-userpage,
     #pt-anonuserpage {
     #pt-anonuserpage {
         background-position: left top;
         background-image: ; change this for a better image left of the user name
        background-repeat: no-repeat;
     } */
        padding-left: 15px !important
    }
    #p-search {
        float: left;
        margin-right: .5em;
        margin-left: .5em
     }
     #p-search h3 {
     #p-search h3 {
         display: none
         display: none
    }
    #p-search form,
    #p-search input {
        margin: 0;
        margin-top: .4em
     }
     }
     div#simpleSearch {
     div#simpleSearch {
        display: block;
        width: 12.6em;
        padding-right: 1.4em;
        height: 1.4em;
        margin-top: .65em;
        position: relative;
        min-height: 1px;
        border: solid 1px #aaa;
        color: black;
         background-color: #333 !important;
         background-color: #333 !important;
         background-position: top left;
         background-image: none;
        background-repeat: repeat-x
    }
    div#simpleSearch input {
        margin: 0;
        padding: 0;
        border: 0;
        color: black;
        background-color: #333 !important
    }
    div#simpleSearch #searchInput {
        width: 100%;
        padding: .2em 0 .2em .2em;
        font-size: 13px;
        direction: ltr;
        -webkit-appearance: textfield
     }
     }
     div#simpleSearch #searchInput:focus {
     div#simpleSearch #searchInput:focus {
Line 358: Line 305:
     div#simpleSearch #searchInput::-webkit-search-results-decoration {
     div#simpleSearch #searchInput::-webkit-search-results-decoration {
         -webkit-appearance: textfield
         -webkit-appearance: textfield
    }
    div#simpleSearch #searchButton,
    div#simpleSearch #mw-searchButton {
        position: absolute;
        top: 0;
        right: 0;
        width: 1.65em;
        height: 100%;
        cursor: pointer;
        text-indent: -99999px;
        line-height: 1;
        direction: ltr;
        white-space: nowrap;
        overflow: hidden;
        background-position: center center;
        background-repeat: no-repeat
     }
     }
     div#simpleSearch #mw-searchButton {
     div#simpleSearch #mw-searchButton {
Line 380: Line 311:
     div.vectorTabs h3 {
     div.vectorTabs h3 {
         display: none
         display: none
    }
    div.vectorTabs {
        float: left;
        height: 2.5em;
        background-position: bottom left;
        background-repeat: no-repeat;
        padding-left: 1px
    }
    div.vectorTabs ul {
        float: left;
        height: 100%;
        list-style-type: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
        background-position: right bottom;
        background-repeat: no-repeat
    }
    div.vectorTabs ul li {
        float: left;
        line-height: 1.125em;
        display: inline-block;
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #f3f3f3;
        background-position: bottom left;
        background-repeat: repeat-x;
        white-space: nowrap
    }
    div.vectorTabs ul>li {
        display: block
     }
     }
     div.vectorTabs li.new a,
     div.vectorTabs li.new a,
Line 427: Line 326:
     }
     }
     div.vectorTabs li a {
     div.vectorTabs li a {
        display: inline-block;
        height: 1.9em;
        padding-left: .5em;
        padding-right: .5em;
         color: #e69100;
         color: #e69100;
        cursor: pointer;
        font-size: .8em
     }
     }
     div.vectorTabs li>a {
     div.vectorTabs li>a {
         display: block
         display: block
    }
    div.vectorTabs span {
        display: inline-block;
        background-position: bottom right;
        background-repeat: no-repeat
    }
    div.vectorTabs span a {
        display: inline-block;
        padding-top: 1.25em
    }
    div.vectorTabs span>a {
        float: left;
        display: block
    }
    div.vectorMenu {
        direction: ltr;
        float: left;
        cursor: pointer;
        position: relative
     }
     }
     body.rtl div.vectorMenu {
     body.rtl div.vectorMenu {
Line 461: Line 335:
     }
     }
     div#mw-head div.vectorMenu h3 {
     div#mw-head div.vectorMenu h3 {
        float: left;
        background-repeat: no-repeat;
        background-position: bottom right;
         margin-left: -1px;
         margin-left: -1px;
        font-size: 1em;
        height: 2.5em;
        padding-right: 1px;
        margin-right: -1px
    }
    div.vectorMenu h3 span {
        display: block;
        font-size: .8em;
        padding-left: .7em;
        padding-top: 1.375em;
        margin-right: 20px;
        font-weight: normal;
        color: #4d4d4d
     }
     }
     div.vectorMenu h3 a {
     div.vectorMenu h3 a {
         position: absolute;
         background-image: url(/skins/Vectordark/images/arrow-down-icon.png?d72f0);
         top: 0;
         background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M15.502%206.001l-5%205.001-5-5.001z%22%20fill%3D%22%23e69100%22%2F%3E%3C%2Fsvg%3E);
        right: 0;
         background-image: linear-gradient(transparent,transparent),url(/skins/Vectordark/images/arrow-down-icon.svg?92f5b)!ie;
        width: 20px;
         background-image: -o-linear-gradient(transparent,transparent),url(/skins/Vectordark/images/arrow-down-icon.png?d72f0);
        height: 2.5em;
 
        background-position: 100% 70%;
         background-repeat: no-repeat;
        -webkit-transition: background-position 250ms;
         -moz-transition: background-position 250ms;
        -o-transition: background-position 250ms;
        transition: background-position 250ms
     }
     }
     div.vectorMenu.menuForceShow h3 a {
     div.vectorMenu.menuForceShow h3 a {
         background-position: 100% 100%
         background-position: 100% 100%
    }
    div.vectorMenu div.menu {
        min-width: 100%;
        position: absolute;
        top: 2.5em;
        left: -1px;
        background-color: white;
        border: solid 1px silver;
        border-top-width: 0;
        clear: both;
        text-align: left;
        display: none
     }
     }
     div.vectorMenu:hover div.menu,
     div.vectorMenu:hover div.menu,
Line 526: Line 366:
     x:default {
     x:default {
         min-width: 0
         min-width: 0
    }
    div.vectorMenu li {
        padding: 0;
        margin: 0;
        text-align: left;
        line-height: 1em
    }
    div.vectorMenu li a {
        display: inline-block;
        padding: .5em;
        white-space: nowrap;
        color: #e69100;
        cursor: pointer;
        font-size: .8em
    }
    div.vectorMenu li>a {
        display: block
     }
     }
     div.vectorMenu li.selected a,
     div.vectorMenu li.selected a,

Revision as of 10:27, 10 July 2017

@media screen {
    /* FOLLOWING IS COMPILED CSS TAKEN FROM https://www.mediawiki.org/wiki/Skin:Vector-DarkCSS */
    /* CSS placed here will affect users of the Vectordark skin */
    /* Override Vector colour scheme to make it dark (compiled from modified LESS code) */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: #c1c1c1
    }
    hr {
        color: #222
    }
    .editOptions {
        background-color: #333;
        border-color: #4c4c4c
    }
    input,
    textarea {
        background-color: #4c4c4c;
        border-color: #4c4c4c;
        color: #c1c1c1
    }
    a,
    .mw-body a.external,
    .mw-body a.extiw {
        color: #e69100
    }
    a:visited,
    .mw-body a.external:visited,
    .mw-body a.extiw:visited {
        color: #a87723
    }
    a.new,
    #p-personal a.new {
        color: #d44
    }
    ul {
        list-style-image: none
    }
    div.thumbinner,
    .catlinks {
        background-color: #4c4c4c;
        border-color: #666
    }
    #toc,
    div.toc,
    ul#filetoc,
    li.gallerybox div.thumb {
        background-color: #4c4c4c;
        border-color: #666
    }
    code {
        border-color: #AAAAAA;
        background-color: #2A2A2A;
        color: #c1c1c1
    }
    table.mw_metadata td,
    table.mw_metadata th,
    table.wikitable,
    table.wikitable>*>tr>th,
    table.wikitable>*>tr>td {
        color: #c1c1c1;
        background-color: #4c4c4c;
        border-color: #666
    }
    table.mw_metadata th,
    table.wikitable>*>tr>th {
        background-color: #595959
    }
    table.diff {
        background-color: #4c4c4c
    }
    td .diffchange {
        color: #4c4c4c
    }
    #pagehistory li.selected,
    td.diff-context {
        background-color: inherit;
    }
    #pagehistory li {
        border: 0
    }
    ul.mw-gallery-packed-hover li.gallerybox:hover div.gallerytextwrapper,
    ul.mw-gallery-packed-overlay li.gallerybox div.gallerytextwrapper,
    ul.mw-gallery-packed-hover li.gallerybox.mw-gallery-focused div.gallerytextwrapper {
        background-color: rgba(0, 0, 0, 0.8)
    }
    #left-navigation div.vectorTabs,
    #right-navigation div.vectorTabs {
        background-color: #1f1f1f;
        background-image: -moz-linear-gradient(top,#333 5%,#1f1f1f 60%);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(5%,#333),color-stop(60%,#1f1f1f));
        background-image: -webkit-linear-gradient(top,#333 5%,#1f1f1f 60%);
        background-image: linear-gradient(#333 5%, #1f1f1f 60%)
    }
    #left-navigation div.vectorTabs ul,
    #right-navigation div.vectorTabs ul {
        background-color: #1f1f1f;
        background-image: -moz-linear-gradient(top, #333 5%, #1f1f1f 60%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(5%, #333),color-stop(60%, #1f1f1f));
        background-image: -webkit-linear-gradient(top, #333 5%, #1f1f1f 60%);
        background-image: linear-gradient(#333 5%, #1f1f1f 60%)
    }
    #left-navigation div.vectorTabs ul li,
    #right-navigation div.vectorTabs ul li {
        background-color: #222;
        background-image: -moz-linear-gradient(top, #333 20%, #222 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #333),color-stop(100%, #222));
        background-image: -webkit-linear-gradient(top, #333 20%, #222 100%);
        background-image: linear-gradient(#333 20%, #222 100%);
        margin-right: 1px
    }
    #left-navigation div.vectorTabs li.new a,
    #right-navigation div.vectorTabs li.new a,
    #left-navigation div.vectorTabs li.new a:visited,
    #right-navigation div.vectorTabs li.new a:visited {
        color: #d44
    }
    #left-navigation div.vectorTabs li.selected,
    #right-navigation div.vectorTabs li.selected {
        background-color: #333;
        background-image: none !important;
        border-bottom: 1px solid #333
    }
    #left-navigation div.vectorTabs li.selected a,
    #right-navigation div.vectorTabs li.selected a,
    #left-navigation div.vectorTabs li.selected a:visited,
    #right-navigation div.vectorTabs li.selected a:visited {
        color: #a87723
    }
    #left-navigation div.vectorTabs li a,
    #right-navigation div.vectorTabs li a {
        color: #e69100
    }
    #left-navigation div.vectorTabs span,
    #right-navigation div.vectorTabs span {
        background: transparent
    }
    div#mw-head #right-navigation div.vectorMenu h3 {
        background-color: #1f1f1f;
        background-image: -moz-linear-gradient(top,#333 5%,#1f1f1f 60%);
        background-image: -webkit-gradient(linear,left top,left bottom,color-stop(5%,#333),color-stop(60%,#1f1f1f));
        background-image: -webkit-linear-gradient(top,#333 5%,#1f1f1f 60%);
        background-image: linear-gradient(#333 5%,#1f1f1f 60%);
        background-size: 1px
    }
    div#mw-head div.vectorMenu h3 span {
        color: #e69100
    }
    div.vectorMenu h3 a {
        background: inherit
    }
    div.vectorMenu ul {
        background-color: black;
        border: solid 1px #0c0c0c
    }
    div.vectorMenu li a {
        color: #e69100
    }
    div.vectorMenu li.selected a,
    div.vectorMenu li.selected a:visited {
        color: #a87723;
        text-decoration: none
    }
    div.vectorMenu#p-cactions div.menu {
        border-color: #333;
        margin-top: 1px;
    }
    div.vectorMenu#p-cactions ul {
        border: 0;
        background-color: #4c4c4c
    }
    #mw-navigation div#mw-panel div.portal {
        background-image: none;
        border-top: 1px solid #4c4c4c
    }
    #mw-navigation div#mw-panel div.portal#p-logo,
    #mw-navigation div#mw-panel div.portal#p-navigation {
        border-top: none
    }
    body {
        background-color: #2a2a2a
    }
    .mw-body {
        border: 1px solid #1f1f1f;
        border-right-width: 0;
        margin-top: 0;
        background-color: #333;
        color: #c1c1c1;
    }
    .mw-body .mw-editsection,
    .mw-body .mw-editsection-like {
        font-family: sans-serif
    }
    .mw-body h1,
    .mw-body #firstHeading {
        font-size: 1.8em
    }
    .mw-body h3 {
        font-size: 1.17em
    }
    .mw-body h4,
    .mw-body h5,
    .mw-body h6 {
        font-size: 100%
    }
    .mw-body #toc h2,
    .mw-body .toc h2 {
        font-size: 100%;
        font-family: sans-serif
    }
    div.emptyPortlet {
        display: none
    }
    ul {
        list-style-type: disc;
    }
    pre,
    .mw-code {
        color: #ffffff;
        background-color: #333 !important;
        border: 1px solid #ddd;
    }
    #siteNotice {
        font-size: .8em
    }
    .redirectText {
        font-size: 140%
    }
    .redirectMsg img {
        vertical-align: text-bottom
    }
    .mw-body-content {
        position: relative;
        line-height: 1.6;
        font-size: .875em
    }
    body.vector-animateLayout .mw-body,
    body.vector-animateLayout div#footer,
    body.vector-animateLayout #left-navigation {
        -webkit-transition: margin-left 250ms, padding 250ms;
        -moz-transition: margin-left 250ms, padding 250ms;
        -o-transition: margin-left 250ms, padding 250ms;
        transition: margin-left 250ms, padding 250ms
    }
    body.vector-animateLayout #p-logo {
        -webkit-transition: left 250ms;
        -moz-transition: left 250ms;
        -o-transition: left 250ms;
        transition: left 250ms
    }
    body.vector-animateLayout #mw-panel {
        -webkit-transition: padding-right 250ms;
        -moz-transition: padding-right 250ms;
        -o-transition: padding-right 250ms;
        transition: padding-right 250ms
    }
    body.vector-animateLayout #p-search {
        -webkit-transition: margin-right 250ms;
        -moz-transition: margin-right 250ms;
        -o-transition: margin-right 250ms;
        transition: margin-right 250ms
    }
    body.vector-animateLayout #p-personal {
        -webkit-transition: right 250ms;
        -moz-transition: right 250ms;
        -o-transition: right 250ms;
        transition: right 250ms
    }
    body.vector-animateLayout #mw-head-base {
        -webkit-transition: margin-left 250ms;
        -moz-transition: margin-left 250ms;
        -o-transition: margin-left 250ms;
        transition: margin-left 250ms
    }
    /* #pt-userpage,
    #pt-anonuserpage {
        background-image: ; change this for a better image left of the user name
    } */
    #p-search h3 {
        display: none
    }
    div#simpleSearch {
        background-color: #333 !important;
        background-image: none;
    }
    div#simpleSearch #searchInput:focus {
        outline: none
    }
    div#simpleSearch #searchInput.placeholder {
        color: #999
    }
    div#simpleSearch #searchInput:-ms-input-placeholder {
        color: #999
    }
    div#simpleSearch #searchInput:-moz-placeholder {
        color: #999
    }
    div#simpleSearch #searchInput::-webkit-search-decoration,
    div#simpleSearch #searchInput::-webkit-search-cancel-button,
    div#simpleSearch #searchInput::-webkit-search-results-button,
    div#simpleSearch #searchInput::-webkit-search-results-decoration {
        -webkit-appearance: textfield
    }
    div#simpleSearch #mw-searchButton {
        z-index: 1
    }
    div.vectorTabs h3 {
        display: none
    }
    div.vectorTabs li.new a,
    div.vectorTabs li.new a:visited {
        color: #a55858
    }
    div.vectorTabs li.selected a,
    div.vectorTabs li.selected a:visited {
        color: #333;
        text-decoration: none
    }
    div.vectorTabs li.icon a {
        background-position: bottom right;
        background-repeat: no-repeat
    }
    div.vectorTabs li a {
        color: #e69100;
    }
    div.vectorTabs li>a {
        display: block
    }
    body.rtl div.vectorMenu {
        direction: rtl
    }
    div#mw-head div.vectorMenu h3 {
        margin-left: -1px;
    }
    div.vectorMenu h3 a {
        background-image: url(/skins/Vectordark/images/arrow-down-icon.png?d72f0);
        background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2222%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M15.502%206.001l-5%205.001-5-5.001z%22%20fill%3D%22%23e69100%22%2F%3E%3C%2Fsvg%3E);
        background-image: linear-gradient(transparent,transparent),url(/skins/Vectordark/images/arrow-down-icon.svg?92f5b)!ie;
        background-image: -o-linear-gradient(transparent,transparent),url(/skins/Vectordark/images/arrow-down-icon.png?d72f0);

    }
    div.vectorMenu.menuForceShow h3 a {
        background-position: 100% 100%
    }
    div.vectorMenu:hover div.menu,
    div.vectorMenu.menuForceShow div.menu {
        display: block
    }
    div.vectorMenu ul {
        list-style-type: none;
        list-style-image: none;
        padding: 0;
        margin: 0;
        text-align: left
    }
    div.vectorMenu ul,
    x:-moz-any-link {
        min-width: 5em
    }
    div.vectorMenu ul,
    x:-moz-any-link,
    x:default {
        min-width: 0
    }
    div.vectorMenu li.selected a,
    div.vectorMenu li.selected a:visited {
        color: #333;
        text-decoration: none
    }
    @-webkit-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }
    @-moz-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }
    @-o-keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }
    @keyframes rotate {
        from {
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            transform: rotate(0deg)
        }
        to {
            -webkit-transform: rotate(360deg);
            -moz-transform: rotate(360deg);
            transform: rotate(360deg)
        }
    }
    #ca-unwatch.icon a.loading,
    #ca-watch.icon a.loading {
        -webkit-animation: rotate 700ms infinite linear;
        -moz-animation: rotate 700ms infinite linear;
        -o-animation: rotate 700ms infinite linear;
        animation: rotate 700ms infinite linear;
        outline: none;
        cursor: default;
        pointer-events: none;
        background-position: 50% 60%;
        -webkit-transform-origin: 50% 57%;
        transform-origin: 50% 57%
    }
    #ca-unwatch.icon a span,
    #ca-watch.icon a span {
        display: none
    }
    #mw-navigation h2 {
        position: absolute;
        top: -9999px
    }
    #mw-page-base {
        height: 5em;
        background-position: bottom left;
        background-repeat: repeat-x;
        background-color: #2a2a2a;
        background-image: -moz-linear-gradient(top, #333 50%, #2a2a2a 100%);
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(50%, #333), color-stop(100%, #2a2a2a));
        background-image: -webkit-linear-gradient(top, #333 50%, #2a2a2a 100%);
        background-image: linear-gradient(#333 50%, #2a2a2a 100%);
        background-color: #333
    }
    div#mw-panel div.portal div.body ul li a {
        color: #e69100
    }
    div#mw-panel div.portal div.body ul li a:visited {
        color: #a87723
    }
    div#mw-panel div.portal.first {
        background-image: none;
        margin-top: 0
    }
    div#mw-panel div.portal.first h3 {
        display: none
    }
    div#mw-panel div.portal.first div.body {
        margin-left: .5em
    }
    div#footer ul li {
        color: #595959;
    }
    div#footer #footer-info li {
        line-height: 1.4em
    }
    .mw-body .external {
        background-position: center right;
        background-repeat: no-repeat;
        padding-right: 13px;
    }
    /* CODE SPECIFIC TO FACTORIO PLACED HERE */
    /* For the ContentCell Template */
    .factorio-contentcell {
        background: #333 !important
    }
    .factorio-contentcell .titlebar {
        background: #3d3d3d;
        color: #c1c1c1 !important;
        font-size: 120%
    }
    /* Languages container on the main page */
    .languages-container {
        background: #333
    }
    .languages-container p {
        margin: 0 !important
    }
    /* Search Widget on the top of the page */
    .suggestions a.mw-searchSuggest-link {
        color: #c1c1c1
    }
    .suggestions a.mw-searchSuggest-link:hover, .suggestions a.mw-searchSuggest-link:active, .suggestions a.mw-searchSuggest-link:focus {
        color: #d7d7d7
    }
    .suggestions-results {
        background-color: #4c4c4c
    }
    .suggestions-result {
        color: #c1c1c1
    }
    .suggestions-special {
        background-color: #4c4c4c;
        color: #c1c1c1
    }
    .suggestions-result-current {
        background-color: #595959;
        color: #d7d7d7
    }
    .suggestions-result-current .special-label, .suggestions-result-current .special-query {
        color: #d7d7d7
    }
    .suggestions-special .special-query {
        color: #c1c1c1;
    }
    div#simpleSearch #searchInput {
        color: #c1c1c1 !important;
    }
    /* Search page */
    #mw-searchoptions {
        background-color: #4c4c4c;
        border-color: #c0c0c0
    }
    .mw-search-profile-tabs {
        background: #595959 !important
    }
    .search-types .current a {
        color: #c1c1c1 !important
    }
    .oo-ui-textInputWidget input,
    .oo-ui-textInputWidget textarea {
        background-color: #333 !important;
        color: #c1c1c1 !important;
        box-shadow: inset 0 0 0 0.1em #C0C0C0 !important
    }
    .oo-ui-widget.oo-ui-widget-enabled input:focus {
        border-color: #72777d
    }
    .oo-ui-menuSelectWidget {
        background-color: #333;
        border: 1px solid #a2a9b1;
        border-radius: 0 0 2px 2px;
        box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15)
    }
    .oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted {
	    background-color: #4c4c4c
    }
    .oo-ui-menuOptionWidget.oo-ui-optionWidget-selected {
	    background-color: #4c4c4c
    }
    .oo-ui-menuOptionWidget.oo-ui-optionWidget > .oo-ui-labelElement-label {
        color: #e69100
    }
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive>.oo-ui-buttonElement-button {
        color: #2a2a2a;
        background-color: #a87723;
        border-color: #a87723
    }
    .oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-flaggedElement-primary.oo-ui-flaggedElement-progressive.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
        background-color: #e69100;
        border-color: #e69100
    }
    /* --- Navbox --- */
    .navbox {
        padding-bottom: 5px
    }
    .navbox th {
        background: #1c1c1c;
        border-radius: 2px 2px 0px 0px
    }
    .navbox .navbox-header {
        background: #2a2a2a !important;
        color: #c1c1c1 !important
    }
    .navbox .list-data {
        background: #3a3939 !important;
        border-radius: 0px 2px 2px 0px
    }
    .navbox .group-data {
        background: #4c4c4c !important;
        border-radius: 2px 0px 0px 2px;
         font-weight: bold
    }
    .navbox p {
        margin: 0 !important;
    }
    .navbox-inner {
         background: #a87723;
         border: 2px solid #e69100;
         border-radius: 5px 5px 5px 5px
    }
    /* Boilerplate */
    .boilerplate {
        background-color: #1c1c1c !important
    }
    a.new {
        font-style: italic
    }
    /* --- Infobox --- */
    .infobox {
        margin-bottom: 5px;
        border-radius: 3px 3px 0 0
    }
    .infobox .infobox-header {
        border-radius: 3px 3px 0 0
    }
    .infobox p {
        margin: 0;
    }
    .infobox .combat {
        background: #611616;
        color: #c1c1c1;
    }
    .infobox .liquids {
        background: #326177;
        color: #c1c1c1;
    }
    .infobox .logic {
        background: #3b155e;
        color: #c1c1c1;
    }
    .infobox .intermediates {
        background: #525252;
        color: #c1c1c1;
    }
    .infobox .machinery {
        background: #9c6500;
        color: #c1c1c1;
    }
    .infobox .resources {
        background: #221f1f;
        color: #c1c1c1;
    }
    .infobox .science {
        background: #5a0c41;
        color: #c1c1c1;
    }
    .infobox .technology {
        background: #004d00;
        color: #c1c1c1;
    }
    .infobox .tools {
        background: #1f517c;
        color: #c1c1c1;
    }
    .infobox .default-infobox {
        background: #126682;
        color: #c1c1c1;
    }
    /* Disambiguation Template */
    .factoriodisambig {
        background: #333 !important;
    }
    .factoriodisambig i {
        color: #c1c1c1 !important;
    }
    /* factorio cleanup box */
    .factoriocleanup {
        background: #1c1c1c !important;
    }
    /* Delete Box */
    .factoriodelete {
        background: #1c1c1c !important
    }
    /* doc template */
    .template-documentation {
        background: #1c1c1c !important;
    }
    /* Game Image */
    #license {
        background: #1c1c1c !important;
    }
    /* Template:Key */
    .keyboard-key {
        background-color: #1c1c1c !important;
    }
    /* Template Merge */
    .factoriomerge {
        background-color: #1c1c1c !important;
    }
    /* Template Move */
    #move {
        background-color: #1c1c1c !important;
    }
    /* Template Shortcut */
    .shortcutbox {
        background-color: #1c1c1c !important;
    }
    /* Spoilers */
    .spoiler-container .button {
        background: #3a3939 !important;
    }
    /* Preview Note */
    .previewnote {
        color: #db1f1f;
    }
    /* DataTable Fix */
    .mw-datatable th {
        background-color: #4c4c4c !important;
    }
    .mw-datatable td {
        background-color: #3a3939 !important;
    }
    .mw-datatable tr:hover td {
        background-color: #4c4c4c !important;
    }
    /* File List Overide */
    /* Active first */
    .TablePager_nav td.TablePager_nav-first .TablePager_nav-enabled {
        background-image: url(/resources/dark/active-first.svg);
    }
    /* Active Previous */
    .TablePager_nav td.TablePager_nav-prev .TablePager_nav-enabled {
        background-image: url(/resources/dark/active-prev.svg);
    }
    /* Active Next */
    .TablePager_nav td.TablePager_nav-next .TablePager_nav-enabled {
        background-image: url(/resources/dark/active-next.svg);
    }
    /* Active Last */
    .TablePager_nav td.TablePager_nav-last .TablePager_nav-enabled {
        background-image: url(/resources/dark/active-last.svg);
    }
    /* First */
    .TablePager_nav td.TablePager_nav-first .TablePager_nav-disabled {
        background-image: url(/resources/dark/first.svg);
    }
    /* Previous */
    .TablePager_nav td.TablePager_nav-prev .TablePager_nav-disabled {
        background-image: url(/resources/dark/prev.svg);
    }
    /* Next */
    .TablePager_nav td.TablePager_nav-next .TablePager_nav-disabled {
        background-image: url(/resources/dark/next.svg);
    }
    /* Last */
    .TablePager_nav td.TablePager_nav-last .TablePager_nav-disabled {
        background-image: url(/resources/dark/last.svg);
    }
    /* up small */
    .TablePager .TablePager_sort-ascending a {
        background-image: url(/resources/dark/s-up.svg);
    }
    /* down small */
    .TablePager .TablePager_sort-descending a {
        background-image: url(/resources/dark/s-down.svg);
    }
    /* Tabber Navigation */
    ul.tabbernav li a {
        background: #595959;
    }
    ul.tabbernav li a:link {
        color: #e69100;
    }
    ul.tabbernav li.tabberactive a {
        background-color: #333;
        border-bottom: 1px solid #333;
    }
    ul.tabbernav li a:hover {
        color: #e69100 !important;
        background: #c1c1c1 !important;
        border-bottom: 1px solid #c1c1c1 !important;
    }
    ul.tabbernav li a:visited {
        color: #a87723;
    }
    /* table of content colors that arent TOCs eg collapsible on balancer page, deletion warning */
    .toccolours, .mw-warning {
        border-color: #666;
        background-color: #4c4c4c;
    }
    /* Recent changes top box */
    fieldset {
        border: 1px solid #141414;
    }
    /* Watch/unwatch icon */
    #ca-watch.icon a {
         background-image: linear-gradient(transparent,transparent),
             url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M8.103%201.146l2.175%204.408%204.864.707-3.52%203.431.831%204.845-4.351-2.287-4.351%202.287.831-4.845-3.52-3.431%204.864-.707z%22%20fill%3D%22%23333%22%20stroke%3D%22%23e69100%22%20stroke-width%3D%220.9999199999999999%22%2F%3E%3C%2Fsvg%3E)
    }
     #ca-watch.icon a:hover, #ca-watch.icon a:focus {
         background-image: linear-gradient(transparent,transparent),
             url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M8.103%201.146l2.175%204.408%204.864.707-3.52%203.431.831%204.845-4.351-2.287-4.351%202.287.831-4.845-3.52-3.431%204.864-.707z%22%20fill%3D%22%23826f4e%22%20stroke%3D%22%23e69100%22%20stroke-width%3D%220.9999199999999999%22%2F%3E%3C%2Fsvg%3E)
    }
     #ca-unwatch.icon a {
         background-image: linear-gradient(transparent,transparent),
             url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M8.103%201.146l2.175%204.408%204.864.707-3.52%203.431.831%204.845-4.351-2.287-4.351%202.287.831-4.845-3.52-3.431%204.864-.707z%22%20fill%3D%22%23e69100%22%20stroke%3D%22%23e69100%22%20stroke-width%3D%220.9999199999999999%22%2F%3E%3C%2Fsvg%3E)
    }
    #ca-unwatch.icon a:hover, #ca-unwatch.icon a:focus {
         background-image: linear-gradient(transparent,transparent),
             url(data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Cpath%20d%3D%22M8.103%201.146l2.175%204.408%204.864.707-3.52%203.431.831%204.845-4.351-2.287-4.351%202.287.831-4.845-3.52-3.431%204.864-.707z%22%20fill%3D%22%23e69100%22%20stroke%3D%22%23e69100%22%20stroke-width%3D%220.9999199999999999%22%2F%3E%3C%2Fsvg%3E)
    }
    /* Recent changes byte colors */
    .mw-plusminus-pos {
        color: #0c870c
    }
    .mw-plusminus-neg {
        color: #db1f1f
    } 
    /* Selector lists */
    select {
	color: #c1c1c1;
        background-color: #4c4c4c
    }
    /* Confirm account page */
    .mw-confirmaccount-type-0 {
        background-color: #333
    }
    .mw-confirmaccount-body-0 {
        background-color: #333
    }
}