MediaWiki:Vectordark.css

From Official Factorio Wiki
Revision as of 17:37, 19 November 2019 by Bilka (talk | contribs) (excluded infobox-extra from bottom border removal)
Jump to navigation Jump to search
The printable version is no longer supported and may have rendering errors. Please update your browser bookmarks and please use the default browser print function instead.

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.
@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: #ffe6c0
    }
    .mw-body h1, .mw-body h2 {
        font-family: "Titillium Web", sans-serif;
    }
    hr {
        color: #222;
        background-color: #222
    }
    .editOptions {
        background-color: #333;
        border-color: #4c4c4c
    }
    input,
    textarea {
        background-color: #3e3e3e;
        border-color: #4c4c4c;
        color: #c1c1c1
    }
    #wpBio {
        background-color: #4c4c4c !important
    }
    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: #444;
        border-color: #666
    }
    .tocnumber {
        color: inherit;
    }
    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: #393939;
        border-color: #888
    }
    table.mw_metadata th,
    table.wikitable>*>tr>th {
        background-color: #424242
    }
    table.diff {
        background-color: #4c4c4c
    }
    td .diffchange {
        color: #4c4c4c
    }
    #pagehistory li.selected,
    td.diff-context {
        background-color: inherit;
        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.vectorMenu {
        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%);
        padding-right: 2px
    }
    div#mw-head #right-navigation div.vectorMenu h3 {
        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%)
    }
    div#mw-head div.vectorMenu h3 span {
        color: #e69100
    }
    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;
    }
    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.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: #242324;
        border: none;
        box-shadow: inset 0 0 2px 2px #141314,-1px -1px 2px 1px #2a292a,2px 2px 3px 0px #656565;
        border-radius: 0px;
        padding-bottom: 15px;
    }
    .factorio-contentcell .titlebar {
        background: inherit;
        color: #ffe6c0;
        font-size: 150%;
        font-family: "Titillium Web",sans-serif;
        font-weight: normal;
    }
    /* 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, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .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, .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
  background-color:#e69100;
  border-color:#e69100 
 }
	/* Move page */
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
		color: #c1c1c1;
		background-color: #333;
		border-color: #72777d;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle {
		background-color: #333;
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover {
		background-color: #333;
		border-color: #9aa0a7
	}
	.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:focus {
		border-color: #e69100 !important;
		box-shadow: inset 0 0 0 1px #e69100 !important;
	}
	.oo-ui-textInputWidget.oo-ui-widget-enabled input:focus, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:focus {
		box-shadow: inset 0 0 0 1px #e69100 !important;
		border-color: #e69100 !important;
	}
	.oo-ui-textInputWidget.oo-ui-widget-enabled input, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea {
		box-shadow: inset 0 0 0 0.1em #333;
	}
	.oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea {
		border-color: #72777d;
	}
	.oo-ui-textInputWidget.oo-ui-widget-enabled input:hover, .oo-ui-textInputWidget.oo-ui-widget-enabled textarea:hover {
		border-color: #9aa0a7
	}
    /* --- 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: 0;
        background: #242324;
        border-color: #141414 #3E3E3E #3E3E3E #141414;
        border-style: solid;
        border-width: 3px;
    }
    .infobox .infobox-header {
        border-radius: 0;
        border-width: 2px;
        border-color: #141414 #3E3E3E #3E3E3E #141414;
        border-style: solid;
    }
    .infobox .infobox-image {
        border-width: 2px;
        border-color: #141414 #3E3E3E #3E3E3E #141414;
        border-style: solid;
    }

    .infobox p {
        margin: 0;
    }
    .infobox table {
        padding: 0;
    }
    .infobox .infobox-header-text {
        font-family: "Titillium Web", sans-serif;
    }
    .infobox .combat {
        background: #611616;
        color: #c1c1c1;
    }
    .infobox .intermediates {
        background: #54543f;
        color: #c1c1c1;
    }
    .infobox .production {
        background: #588435;
        color: #2a2a2a;
    }
    .infobox .logistics {
        background: #5a0c41;
        color: #c1c1c1;
    }
    .infobox .technology {
        background: #004d00;
        color: #c1c1c1;
    }
    .infobox .default-infobox {
        background: #126682;
        color: #c1c1c1;
    }
    .infobox .tabber .tabbernav {
        border-bottom: none;
        padding-bottom: 3px;
    }
    /* the borders of the infobox rows */
    .infobox tr.border-top td {
        border-top: 2px solid #141414;
        padding: 0px 4px 1px 4px;
    }  
    .infobox tr td[colspan]:not(.infobox-extra) {
        border-bottom: none;
    }
    .infobox tr td, .infobox tr td.infobox-vrow-value{
        border-bottom: 2px solid #3e3e3e;
    }
    .infobox div.infobox-header tr td{
        border-bottom:  none;
    }

    /* 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 */
    .factorio-doc {
        background-color: #1c1c1c;
    }
    /* 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 */
    .oo-ui-buttonElement-framed.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
        background-color: #8a794c;
        color: #2a2a2a;
        border-color: #8a794c;
    }
    .oo-ui-buttonGroupWidget .oo-ui-buttonElement-framed.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
        border-left-color: transparent;
    }

    /* this is here so that it can be enabled when the wiki bug is fixed and the code is removed from common */
    /*.oo-ui-icon-previous, .mw-ui-icon-previous::before {
        background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22%232a2a2a%22%3E%3Ctitle xmlns:default=%22http://www.w3.org/2000/svg%22%3Eprevious%3C/title%3E%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 d=%22M4.8 10l9 9 1.4-1.5L7.8 10l7.4-7.5L13.8 1z%22/%3E%3C/g%3E%3C/svg%3E")
    }
    .oo-ui-icon-first, .mw-ui-icon-first::before {
        background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22%232a2a2a%22%3E%3Ctitle xmlns:default=%22http://www.w3.org/2000/svg%22%3Efirst%3C/title%3E%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 d=%22M3 1h2v18H3zm13.5 1.5L15 1l-9 9 9 9 1.5-1.5L9 10l7.5-7.5z%22/%3E%3C/g%3E%3C/svg%3E")
    }
    .oo-ui-icon-next, .mw-ui-icon-next::before {
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22%232a2a2a%22%3E%3Ctitle xmlns:default=%22http://www.w3.org/2000/svg%22%3Enext%3C/title%3E%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 d=%22M6.2 1L4.8 2.5l7.4 7.5-7.4 7.5L6.2 19l9-9z%22/%3E%3C/g%3E%3C/svg%3E")
    }
    .oo-ui-icon-last, .mw-ui-icon-last::before {
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Cg fill=%22%232a2a2a%22%3E%3Ctitle xmlns:default=%22http://www.w3.org/2000/svg%22%3Elast%3C/title%3E%3Cpath xmlns:default=%22http://www.w3.org/2000/svg%22 d=%22M15 1h2v18h-2zM3.5 2.5L11 10l-7.5 7.5L5 19l9-9-9-9-1.5 1.5z%22/%3E%3C/g%3E%3C/svg%3E")
    } */
    /* 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: #333333;
        border-color: #3E3E3E #141414 #141414 #3E3E3E;
        border-width: 2px;
    }
    ul.tabbernav li a:link {
        color: #e69100;
    }
    ul.tabbernav li.tabberactive a {
        background-color: #242324;
    	border-width: 2px;
    	border-color: #141414 #3E3E3E #242324 #141414;
    	border-style: solid;
    }
    ul.tabbernav li a:hover {
    	color:#e69100 !important;
    	background:#5c5c5c !important;
    	border-color: #3E3E3E #141414 #141414 #3E3E3E;
    }
    ul.tabbernav li.tabberactive a:hover {
    	border-color: #141414 #3E3E3E #242324 #141414;
    	border-bottom: 2px solid #242324 !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: #444;
    }
    /* Recent changes top box */
    fieldset {
        border-color: #141414
    }
    .mw-changeslist-legend {
        border-color: #1F1F1F
    }
    /* 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 extension */
    .mw-confirmaccount-type-0 {
        background-color: #333
    }
    .mw-confirmaccount-body-0 {
        background-color: #333
    }
    .mw-confirmaccount-bar {
        background-color: #2A2A2A;
        border-width: 2px
    }
    /* Special:Preferences */
    .client-js #preferences {
	border: 1px solid #4c4c4c;
	background-color: #2a2a2a;
    }
    .client-js #preferences fieldset {
	border-top-color: #4c4c4c
    }
    .client-js #preferences legend {
	color: inherit
    }
    .client-js #preftoc {
	background-image: url(/resources/dark/preferences/break.png)
    }
    .client-js #preftoc li {
	background-image: url(/resources/dark/preferences/break.png)
    }
    .client-js #preftoc a, .client-js #preftoc a:active {
	color: #e69100;
    }
    .client-js #preftoc li.selected a {
	background-image: -moz-linear-gradient(top, #333 20%, #2a2a2a 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%, #333), color-stop(100%, #2a2a2a));
	background-image: -webkit-linear-gradient(top, #333 20%, #2a2a2a 100%);
	background-image: linear-gradient(#333 20%, #2a2a2a 100%);
	background-color: #333;
	color: #c1c1c1;
    }
	
    /* Special:UserLogin */
    .mw-ui-vform .warning{
	color: #c1c1c1;
	border-color: #382929;
	background-color: #351717;
    }
    .mw-ui-input {
	color: #c1c1c1;
	background-color: #333;
	border-color: #72777d;
	box-shadow: inset 0 0 0 0.1em #333;
    }
    .mw-ui-input:focus {
	border-color: #e69100 !important;
	box-shadow: inset 0 0 0 1px #e69100 !important;
    }
    .mw-ui-input:hover {
	border-color: #9aa0a7
    }
    .mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-constructive {
	color: #2a2a2a;
	background-color: #a87723;
	border-color: #a87723
    }
    .mw-ui-button.mw-ui-progressive:hover, .mw-ui-button.mw-ui-constructive:hover {
	background-color: #e69100;
	border-color: #e6910
    }

    /* SyntaxHighlight extension */
    .mw-highlight .s, .mw-highlight .s2 {
        color: #e42c2c;
    }
    .mw-highlight .k, .mw-highlight .kd, .mw-highlight .kc {
        color: #30ab30;
    }
    .mw-highlight .nn, .mw-highlight .nc {
        color: #5454F3;
    }
    .mw-highlight {
        background-color: #2A2A2A;
    }
    .mw-highlight .lineno {
        background-color: #4C4C4C;
    }
    .mw-highlight .o, .mw-highlight .p {
        color: #969696;
    }
    .mw-highlight .mi, .mw-highlight .mf {
        color: #ff6300;
    }
    .mw-highlight .ow {
        color: #F225FF;
    }
    .mw-highlight .nf {
        color: #8E8EFF;
    }
    /* --- Template:Boilerplate --- */
    .factorio-boilerplate table {
        background-color: #1c1c1c;
        border-color: #6f6f6f
    }
    /* Option dropdowns, group */
    optgroup {
        background-color: #4C4C4d;
    }
    /* Fancy Template:Icon */
    .factorio-icon[style*="background-color:#999"], .factorio-icon[style*="background-color:#929292"] {
        background: radial-gradient(#909090,#6b6b6c);
        border-top: 1px solid #CCC;
        border-left: 1px solid #CCC;
        border-right: 1px solid #2A2A2A;
        border-bottom: 1px solid #2A2A2A;
    }
    /* text below edit box */
    .editOptions {
        color: inherit;
    }
    /* search result info (number of pages) */
    .results-info {
        color: inherit;
    }
    /* letter count in summary box */
    .oo-ui-textInputWidget > .oo-ui-labelElement-label {
        color: inherit;
    }
    
    /* site notice about experimental version */
    #siteNotice {
        padding: 5px;
        background: #e74b4b;
        border: none;
        box-shadow: inset 0 0 2px 2px #222,-1px -1px 2px 1px #2a292a,2px 2px 3px 0px #656565;
        border-radius: 0px;
        max-width: 50%;
        margin: auto;
        margin-bottom: 15px;
        color: black;
    }
    
    #siteNotice a {
        color: #111168 !important;
        font-weight: bolder;
    }

    /* Prototype parents list */
    .prototype-parents {
        background-color: #242324;
    }

    /* Prototype table of contents */
    .prototype-toc td {
        border-bottom: 1px dotted #555;
    }
    
    /* Semantic mediawiki */
    .smw-tabs input.nav-tab:checked + label.nav-label {
        color: inherit;
    }
    
    .usage-count {
        color: inherit !important;
        background-color: #242324 !important;
    }
}