Vintage Story - Dark by xiggi

/* ==UserStyle==
@name           Vintage Story - Dark
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Dark design for Vintage Story.
@author         https://www.vintagestory.at/profile/190926-xiggi/
==/UserStyle== */

@-moz-document domain("vintagestory.at") {
    :root {
        --dark: rgba(0, 0, 0, .8);
        --gray: #090808;
        --third-gray: #191717;
        
        --green: #87c540;
    }
    
    body {
        background-image: url("https://content.invisioncic.com/r268468/monthly_2018_10/Vintage_story_Causeway001.jpg.c111b062a12d4021f8d110dcf283627c.jpg") !important;
        background-color: var(--dark) !Important;
        color: #777;
    }
    
    .ipsDataItem_meta {
        color: #777;
    }
    
    #ipsLayout_body, #ipsLayout_footer {
        background-color: transparent;
    }
    
    #ipsLayout_footer {
        background-color: transparent;
    }
    
    .ipsType_sectionTitle, .ipsButtonBar,
    li.cForumRow.ipsDataItem, .cTopicList .ipsDataItem {
        background: var(--dark);
    }
    
    a.ipsType_sectionTitle, .ipsType_sectionTitle a, a {
        color: #fff;
    }
    
    a.ipsType_sectionTitle:hover, .ipsType_sectionTitle a:hover, a:hover, a:active{
        color: var(--green);
        transition: 0.2s;
    }
    
    .ipsBreadcrumb > ul, .lightHeader, .ipsList_inline.ipsPos_right {
        background-color: transparent;
        margin-bottom: 10px;
    }
    
    .ipsBreadcrumb a {
        color: #ccc;
    }
    
    .ipsBreadcrumb a:hover, .ipsBreadcrumb a:active {
        color: #fff;
        transition: 0.2s;
    }
    
.ipsWidget.ipsWidget_horizontal[data-blockid^="app_cms"]:not([data-blockid^="app_cms_RecordFeed"]), .ipsPageHeader {
    background-color: var(--dark);
    color: #ccc;
    }
    
    .ipsType_pageTitle {
        color: #fff;
    }
    
    .ipsType_sectionTitle, .ipsButtonBar {
    background-color: var(--dark);
    }
    
    .ipsBox, #ipsLayout_mainArea > .ipsForm[action$="do=edit"] > .ipsForm, #ipsLayout_footer #elCopyright, ul#elFooterLinks  {
        background-color: transparent;
        color: #ccc;
    }
    
    #ipsLayout_footer a, #ipsLayout_footer p {
        color: #ccc;
    }
    
    #ipsLayout_footer a:hover, #ipsLayout_footer a:active {
        color: #fff;
        transition: 0.2s;
    }
    
    .ipsType_light {
        color: #777;
    }

    .ipsDataItem_statsLarge .ipsDataItem_stats_number {
        color: #ccc;
    }
    
    #ipsLayout_header nav::after {
    background-color: var(--dark);
    }
    
.ipsNavBar_active__identifier {
    border-bottom-color: var(--dark);
}
    
    #ipsLayout_header nav {
    background-color: var(--dark);
    }
    
.ipsNavBar_primary > ul > li.ipsNavBar_active > a {
    background-color: var(--green);
    color: #000;
}
    
    ul.ipsNavBar_secondary {
    background-color: var(--dark);
    }
    
    .ipsNavBar_secondary > li > a {
        color: #ccc !important;
        text-decoration: none !important;
    }
    
    .ipsNavBar_secondary > li > a:hover, .ipsNavBar_secondary > li > a:active {
        background-color: var(--green);
        color: #000 !important;
        transition: 0.2s;
    }
    
    .ipsMenu {
        background-color: var(--gray);
    }
    
.ipsMenu.ipsMenu_topCenter::before, .ipsMenu.ipsMenu_topCenter::after {
    border-top-color: var(--gray);
}
    
    .ipsApp .ipsButton_link {
        color: var(--green);
    }
    
    #ipsLayout_header header {
    background-color: var(--dark);
    }
    
    #elUserNav {
        background-color: var(--gray);
    }
    
    #elUserNav > li > a, #elFooterSocialLinks > li > a {
        color: var(--green);
    }
    
    #ipsLayout_mainArea {
        background-color: transparent;
    }
    
    body[data-pagecontroller="page"] .ipsWidget {
    background-color: var(--dark);
        color: #ccc;
    }
    
    a.buyembedded, a.linkbutton {
        background-color: transparent;
        color: var(--green);
        border: 2px solid var(--green);
    }
    
    a.buyembedded:hover, a.linkbutton:hover {
        background-color: var(--green);
        color: #fff !Important;
        border: 2px solid var(--green);
        transition: 0.2s;
        transform: none;
    }

.ipsBreadcrumb .fa:not( .fa-home ) {
    opacity: inherit;
}
    
    .ipsType_sectionHead, p.ipsType_reset.ipsType_small.ipsType_center {
        color: #fff;
    }
    
    label.ipsFieldRow_label  {
        color: var(--green);
    }
    
    .ipsFieldRow_desc {
        color: #ccc;
    }
    
.ipsMenu.ipsMenu_bottomRight:before, .ipsMenu.ipsMenu_bottomRight:after {
    border-bottom-color: var(--gray);
}
    
    .ipsWidget_title, .ipsAreaBackground_reset, .ipsAreaBackground_light, .ipsTabs_activeItem {
        background-color: var(--dark);
    }
    
    .ipsModal {
        background-color: var(--dark);
    }
    
    .ipsDialog > div {
        background-color: var(--gray);
        box-shadow: var(--gray);
    }
    
    .ipsDialog_title {
        color: #fff;
    }
    
    .ipsDialog_close {
        color: #fff !Important;
    }
    
    .ipsDialog_close:hover, .ipsDialog_close:active {
        color: var(--green);
        transition: 0.2s;
    }
    
    .ipsFieldRow_required {
        color: #d72424;
    }
    
.ipsApp .ipsField_autocomplete, .ipsApp textarea, .ipsApp input[type="text"], .ipsApp input[type="password"], .ipsApp input[type="datetime"], .ipsApp input[type="datetime-local"], .ipsApp input[type="date"], .ipsApp input[type="month"], .ipsApp input[type="time"], .ipsApp input[type="week"], .ipsApp input[type="number"], .ipsApp input[type="email"], .ipsApp input[type="url"], .ipsApp input[type="search"], .ipsApp input[type="tel"], .ipsApp .ipsField_dummy, .ipsField__checkboxOverflow--active {
    background-color: var(--dark);
    }
    
    .ipsType_veryLarge, .ipsType_huge {
        color: #fff;
    }
    
    .ipsApp .ipsButton_light {
        background-color: var(--gray);
        color: #ccc;
    }
    
    .ipsApp .ipsButton:hover:not(:active) {
        background-color: var(--green);
        color: #000;
        transition: 0.2s;
    }
    
    .ipsWidget_title {
        color: #fff;
    }
    
.ipsApp .ipsSpacer_bottom, .ipsApp .ipsSpacer_both, #elProfileStats {
        background: var(--gray);
    }
    
    .ipsType_minorHeading {
        color: #fff;
    }
    
    .ipsApp .ipsButton_veryLight {
        background: var(--dark);
        color: var(--green);
    }
    
    .cProfileRepScore_neutral {
        background: var(--green);
    }
    
.ipsTabs_panel {
        background-color: var(--dark);
    }
    
    .ipsType_sectionTitle {
        color: #fff;
    }
    
.ipsSideMenu_itemActive a, a.ipsSideMenu_itemActive, span.ipsSideMenu_itemActive, .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ a, .ipsSideMenu_withChecks .ipsSideMenu_item > input[type="checkbox"]:checked ~ span, .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ a, .ipsSideMenu_withRadios .ipsSideMenu_item > input[type="radio"]:checked ~ span {
    background-color: var(--green);
    color: #000;
    }
    
.ipsSideMenu_item:not( .ipsSideMenu_itemActive ) a:hover, a.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover, span.ipsSideMenu_item:not( .ipsSideMenu_itemActive ):hover {
    background-color: var(--green);
    color: #000;
    transition: 0.2s;
    }
    
    ul.ipsSideMenu_list {
        background-color: var(--dark);
    }
    
    .ipsProgressBar_progress {
    background-color: var(--green);
        color: #000;
    }
    
    .cProfileAchievements {
        background-color: var(--gray);
    }
    
    .cProfileAchievements > a:hover {
      background-color: var(--dark);
    }
    
    .ipsFieldRow_section {
        background: var(--dark);
        color: #fff;
    }
    
    .ipsApp select:not( [multiple] ) {
        background-color: var(--dark);
        border-color:transparent;
        color: #fff;
    }
    
    [data-ipseditor] {
        background: var(--dark); 
    }
    
    .ipsApp .ipsButton_primary {
        background: var(--dark);
        color: var(--green);
    }
    
[dir='ltr'] .ipsComposeArea_withPhoto [data-ipseditor]::before, [dir='ltr'] .ipsComposeArea_withPhoto [data-ipseditor]::after {
    right: calc(100%);
    border-right-color: var(--dark);
}
    
    .ipsComposeArea_dummy {
        background-color: var(--gray);
    }
    
    html[dir="ltr"] .cProfileFields .ipsDataItem_size3 {
        color: #fff;
    }
    
    .ipsBreadcrumb [data-role="breadcrumbList"] > li:not(:first-child):last-child {
        color: #fff;
            opacity: inherit;
        font-weight: 600;
    }
    
    .ipsMenu_title {
        color: #fff;
    }
    
.ipsMenu_item > a:not( .ipsMenu_itemInline ), .ipsMenu_item > span:not( .ipsMenu_itemInline ), .ipsMenu_item > button:not( .ipsMenu_itemInline ) {
    color: #ccc;
    }
    
ul:not( .ipsMenu_keyNav ) .ipsMenu_item:not( .ipsMenu_itemClicked ):not( .ipsMenu_itemDisabled ) a:not( .ipsMenu_itemInline ):hover, .ipsMenu_item[data-selected] a, .ipsMenu_item[data-selected] span, .ipsMenu_item.ipsMenu_hover, .ipsMenu_item > button:not( .ipsMenu_itemInline ):hover {
    background-color: var(--green);
    color: #000;
    transition: 0.2s;
    }
    
    #elMobileNav  {
        background-color: var(--dark);
        color: #ccc;
    }
    
.ipsMobileHamburger a {
    color: #ccc;
}
    
    .ipsDrawer_close {
        background: var(--green);
    }
    
    .ipsDrawer_list [data-action="back"] a {
        color: #fff !important;
        background: var(--third-gray);
    }
    
    .ipsDrawer_list [data-action="back"] a:hover, .ipsDrawer_list [data-action="back"] a:active {
        color: var(--green);
        transition: 0.2s;
    }
    
    .ipsType_light {
        color: #ccc;
    }
    
    article.ipsComment > .ipsColumn_fluid {
        background-color: var(--dark);
    }
    
#elSearch, .ipsButtonRow li > a, .ips...