Aternos - Deep Dark by xiggi

/* ==UserStyle==
@name           Aternos - Deep Dark
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep Dark theme for Aternos
@author         Me
==/UserStyle== */

@-moz-document domain("aternos.org") {
    :root {
        --main-bg: rgb(12, 12, 12);
        
        --second-bg: rgb(21, 21, 21);
        --second-bg-opacity: rgba(21, 21, 21, .5);
        
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);
    }
    
    .row {
        background: var(--main-bg);
        color: #ccc;
    }
    
    .row.dark {
        background: var(--second-bg);
    }
    
    .splash-footer {
        background: var(--main-bg);
    }
    
    .front-software-group {
        background: var(--second-bg);
    }
    
    .front-software {
        background: var(--third-bg);
        color: #fff;
    }
    
    .team-member-text-desc {
        color: #ccc;
    }
    
.tetris-row-element, .icontext-icon  {
    border: 1px solid transparent;
    }
    
.tetris-row-element.mod-force-open-top {
    border-top-color: transparent;
}
    
    .splash-fullscreen {
        background: var(--main-bg);
    }
    
    body, .body>.main, .body>.content, .body>.main .content {
        background: var(--main-bg);
    }
    
    .or-or span {
        background: var(--main-bg);
    }
    
.btn.btn-white, .btn.btn-light {
    background-color:var(--second-bg);
    color: #ccc;
}
    
    .go-input-group {
    background-color:var(--second-bg);
    color: #ccc;
    }
    
    .go-input-group:hover, .go-input-group:active {
        background: #2b87d3;
        color: #fff;
        transition: 0.2s;
    }
    
    .btn-main {
        background: var(--second-bg);
        color: #2b87d3;
    }
    
    .btn-main:hover, .btn-main:active  {
        background: #2b87d3;
        color: #fff;
        transition: 0.2s;
    }
    
    .number-label {
        color: #ccc;
    }
    
    #theme-switch.dark .body>.main, #theme-switch.dark .body>.content {
    background-color:var(--second-bg);
    }
    
    #theme-switch.dark .body>.main .content {
        background: var(--main-bg);
    }
    
    .header-link-exaroton, #sub-frame-error, .responsive-leaderboard.mobile-full-width.ad-dfp, .help-center-articles, footer, .responsive-sky-scraper, .server-b-tutorials, .vm-footer-content {
        display: none;
    }
    
    .help-center-article {
        background: var(--second-bg);
    }
    
    .header {
        background: var(--second-bg);
    }
    
    .header .account-navigation .item:hover {
        background: var(--third-bg);
        transition: 0.2s;
    }
    
    .create-software, .change-later-notice, .server-ip, .server-info-box .server-info-box-body, .navigation .navigation-server, .navigation, .servercard, .config-options-file {
          background: var(--second-bg);
    }
    
    .server-info-box-footer-autoupdate {
        background: var(--third-bg); 
    }
    
    .servercard:hover {
        background: var(--third-bg); 
        transition: 0.2s;
    }
    
    .navigation .item:hover {
        background: var(--third-bg); 
        transition: 0.2s;
    }
    
    .btn-green, .btn-success {
        background-color: var(--third-bg);
        color: var(--color-success);
    }
    
    .btn-green:hover, .btn-success:hover {
        background-color: #2b87d3;
        color: #fff;
        transition: 0.2s;
    }
    
.server-info-box .server-info-box-title {
    background: var(--second-bg);
    color: var(--color-main);
    }
    
    .dark .config-option-input {
        background: var(--main-bg); 
    }
    
    .config-option-output {
        background: var(--third-bg); 
    }
    
    .btn-blue, .splash-menu .mod-signup {
        background: var(--third-bg); 
        color: #2b87d3;
    }
    
    .btn-blue:hover, .splash-menu .mod-signup:hover {
        background: #2b87d3;
        color: #fff;
        transition: 0.2s;
    }
    
    .front-software-description {
        color: #ccc;
    }
    
.tetris-row-element.mod-open-bottom, .splash-footer.ontop {
    border-bottom: solid 1px transparent;
}
    
.toggle label {
    border: 2px solid transparent;
    background: var(--second-bg);
}
    
    .select, .number-option input, .input-number > div {
    background: var(--second-bg);
    }

    .select, .number-option input {
border-right: var(--main-bg) solid 1px;
}
    
.input-number-up {
    border-bottom: var(--main-bg) solid 1px;
}
    
    .software-label {
        background-image: none;
        background: var(--second-bg);
    }
    
    .software-type {
       background: var(--third-bg); 
    }
    
    .account-setting {
    background: var(--second-bg);
    }
    
    .account-notifications-list-item {
       background: var(--third-bg); 
        color: #ccc;
    }
    
    .language-input-selector {
       background: var(--third-bg); 
        color: #ccc; 
    }
    
    .language-select {
       background: var(--third-bg); 
        color: #ccc; 
    }
    
    .path-bar {
    background: var(--second-bg);
    }
    
.path-bar .files-folder-count {
       background: var(--main-bg); 
    }
    
    .file {
    background: var(--second-bg);
    }
    
    .file.clickable:hover, .file.clickable:active, .file.clickable:focus {
       background: var(--third-bg); 
        transition: 0.2s;
    }
    
    .file .filesize {
       background: var(--main-bg); 
    }
    
    .path-bar .path .item {
       background: var(--main-bg); 
        color: #fff;
    }
    
    .playerlist-menu, .playercardlist .playercard {
    background: var(--second-bg);
}
    
    .plugin {
       background: var(--third-bg); 
    }
    
    .plugin-footer {
       background: var(--second-bg); 
    }
    
    .plugin-search {
       background: var(--second-bg);  
    }
    
    .pagination a {
       background: var(--third-bg); 
}
    
    .analysis, .log {
       background: var(--second-bg);  
    }
    
    .bigicon-text {
        color: #ccc;
    }
    
    .splash-menu > div:hover, 
    .langswitch-opener:hover, .langswitch-opener:active {
        color: #fff;
        transition: 0.2s;
    }
    
    .langswitch-dropdown {
       background: var(--third-bg);  
    }
    
    .langswitch-dropdown > a {
        background: var(--second-bg);
        color: #ccc;
    }
    
    .langswitch-dropdown > a:hover {
        background: #2b87d3;
        color: #fff;
        transition: 0.2s;
    }
    
    .logo img:hover, .logo img:active {
        opacity: 70%;
        transition: 0.2s;
    }
    
    .account-setting-input-group {
        background: var(--third-bg);
        color: #ccc;
}
    
    .account-setting-input input {
        background: var(--third-bg);
    }
    
.header .userdropdown {
    background: var(--third-bg);
    border-left: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
    
    .account-notifications-list-item .toggle-label, .account-notifications-list-item .toggle-icon {
        color: #ccc;
    }
}