DISBOARD Deep Dark by xiggi

/* ==UserStyle==
@name           DISBOARD Deep Dark
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep Dark theme for disboard.org
@author         xiggi
==/UserStyle== */

@-moz-document domain("disboard.org") {
    :root {
        /** Backgrounds **/
        
        --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-opacity: rgb(46, 46, 46);
    }
    
    body, html {
        background: var(--main-bg);
        color: #ccc;
    }
    
.main{
    background: var(--main-bg);
}
    
    .listing-card .server-header, .listing-card .card-body, .listing-card .server-join, .listing-card .server-footer .server-bumped-at, .listing-card .card-body, .is-elastic-text .read-more, .button.is-dark, .listing-card .server-rating .server-rating-body, .pagination li a, .pagination li span, .footer, .server-view .server-detail, .server-view .server-detail .server-bumped-at, .dashboard-settings .muted-server, .server-new .server-manage-header, .server-edit .server-manage-header, #header .navbar-menu, .card-content, .server-view .server-ratings-reviews .server-view-reviews .review-created-at, .server-view .server-ratings-reviews .server-view-reviews .review-created-at {
        background: var(--second-bg);
            }

    .listing-card .server-header {
    border-right: .5rem solid transparent;
    }
    
    .button.is-dark:hover, .button.is-dark.is-hovered, .tag:not(body), .category:not(body) , .listing-card .server-category, .server-view .server-detail .server-labels .server-member-counts .member-count, .server-view .server-detail .server-category {
        background: var(--third-bg);
    }
    
    .server-online, .server-online:after {
        background: rgba(88, 101, 242, .5);
        color: #fff;
    }
    
    .listing-card .server-newborn, .server-view .server-detail .server-newborn {
        background: rgba(227, 194, 22, .1);
        border: 1px solid #e3c216;
        color: #e3c216;
        margin-bottom: 5px;
        border-radius: 1px;
    }
    
    .logo {
        background: var(--main-bg);
    }
    
    #header-focus .logo {
        background: var(--second-bg);
    }
    
    nav#header {
        background: var(--second-bg) !Important;
    }
    
    .server-view {
       background: var(--main-bg);
    }
    
    .server-view .share-buttons, .server-view .share-buttons.scrolled {
        display: none;
    }
    
    .tag:not(body) .count, .category:not(body) .count {
        margin-left: 5px;
    }
    
.tabs ul, .tabs a {
    border-bottom-color: var(--third-bg);
    }
    
.input, .textarea, .select select {
    background-color: var(--second-bg);
    border-color: var(--third-bg);
    border-radius: .1rem;
    color: #ccc;
}
    
.bootstrap-tagsinput input[type=text] {
    background-color: var(--second-bg);
    border: 1px solid var(--third-bg);
}
    
    .server-tag p>strong {
        background: var(--third-bg);
    }
    
    a.tag:hover {
        background: var(--third-bg-opacity);
    }
    
.listing-card .server-join .button-join:hover, .listing-card .server-join .button-join:active {
    transform: none;
}
    
    .server-view .fixed-join-button .button-join {
    background-color: var(--second-bg);
    }
    
    .listing-card .server-footer .server-nsfw {
    background-color: var(--second-bg);
    color: #cd4848;
    }
    
a.dropdown-item:hover, button.dropdown-item:hover, .sorter .dropdown-item:hover {
    background-color: var(--third-bg);
    color: #fff;
}
    
    .review-card .reviewer {
    background-color: var(--third-bg);
    }
    
    .review-card .reviewer .reviewer-label {
        background: var(--third-bg-opacity);
    }
    
.server-view .server-detail .server-body, .tag:not(body), .category:not(body), .server-view .server-detail .server-category, .is-elastic-text, .listing-card .server-category {
    color: rgba(204,204,204,.7);
    text-shadow: 0 0 40px #0a0a0a;
}
    
.pagination li a, .pagination li span {
    border-radius: 5px;
    color: #ccc;
}
    
    .pagination li a:hover {
        background: var(--third-bg-opacity);
        color: #fff;
        transition: 0.2s;
    }
    
    .pagination li.active a, .pagination li.active span {
        background: #5865f2;
    }
    
    .pagination li.active a:hover {
        background: #4853c7;   
        color: #fff;
        transition: 0.2s;
    }
    
    .button.is-discord {
        background: var(--second-bg);
        color: #5865f2;
    }
    
    .button.is-discord:hover {
        background: #4853c7;   
        color: #fff;
        transition: 0.2s;
    }
    
a.navbar-item:focus, a.navbar-item:focus-within, a.navbar-item:hover, a.navbar-item.is-active, .navbar-link:focus, .navbar-link:focus-within, .navbar-link:hover, .navbar-link.is-active {
    background: var(--third-bg);
    }
    
    .dashboard-servers .button-add-server, .dashboard-reviews .button-add-server {
    background: var(--second-bg);
    color: #0ac775;
    }
    
.dashboard-servers .button-add-server:hover, .dashboard-reviews .button-add-server:hover {
    background: #0ac775;
    transition: 0.2s;
}
    
    .button.is-primary {
    background: var(--second-bg);
    color: #0ac775;
    }
    
    .button.is-primary:hover {
    background: #0ac775;
    transition: 0.2s;
    }
    
.button.is-danger {
    color:  #eb4c61;
    background: var(--second-bg);
}
    
.button.is-danger:hover {
    background:  #eb4c61;
    transition: 0.2s;
}
    
.notification.is-warning {
    color: #fceb4f;
    background: var(--second-bg);
}
    
.button.is-outlined {
    border-color: var(--third-bg);
    color: #ccc;
}
    
.button.is-outlined:hover {
    background: var(--third-bg);
    color: #fff;
    transition: 0.2s;
}
    
hr {
    background-color: var(--third-bg);
    }
    
.button.is-text:hover, .button.is-text.is-hovered, .button.is-text:focus, .button.is-text.is-focused {
    background-color: var(--third-bg);
    color: #fff;
    transition: 0.2s;
}
    
    .button.is-text {
        color: #ccc;
    }
    
    .footer {
        display: none;
    }
    
    .listing-card .server-name a:hover, .listing-card .server-name a:active {
        color: #4853c7;
        transition: 0.2s;
    }
    
.modal .modal-card-foot {
    background: var(--second-bg);
    border-top-color: var(--third-bg);
}
    
.modal * {
    color: #ccc;
}
    
.modal-card-body {
    background-color: var(--second-bg);
    }
    
.button {
    background-color: transparent;
    border-color: var(--third-bg);
    }
    
    a {
        color: #ccc;
    }
    
    a:hover, a:active {
        color: #5865f2;
        transition: 0.2s;
    }
    
.select:not(.is-multiple):not(.is-loading)::after {
    border-color: #4853c7;
    }

.input:focus, .textarea:focus, .select select:focus, .is-focused.input, .is-focused.textarea, .select select.is-focused, .input:active, .textarea:active, .select select:active, .is-active.input, .is-active.textarea, .select select.is-active {
    border-color: #4853c7;
    box-shadow: 0 0 0 0.125em rgba(72, 83, 199, .25);
}
    
.button:focus:not(:active), .button.is-focused:not(:active) {
    box-shadow: 0 0 0 0.125em rgba(72, 83, 199, .25);
}
    
    ::selection {
        background: #4853c7;
        color: #fff;
    }
    
.input:hover, .textarea:hover, .select select:hover, .is-hovered.input, .is-hovered.textarea, .select select.is-hovered {
    border-color: #4853c7;
}
    
    .sorter-summary .icon-chevron-down, .sorter .icon.on {
        color: #5865f2;
    }
    
    /** Scrollbar **/
    /* width */
    ::-webkit-scrollbar {
        width: 5px;
    }

    /* Track */
    ::-webkit-scrollbar-track {
        background: var(--main-bg);
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: #777;
    }

}