emoji.gg - amoled by xiggi

/* ==UserStyle==
@name           emoji.gg - amoled
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep dark theme for emoji.gg
@author         Me
==/UserStyle== */

@-moz-document domain("emoji.gg") {
    :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-hover: rgb(31 31 31 / 80%);;
        
        --gray-bg: rgb(31, 31, 31);
        
        /** Colors **/
        
        --white: #fff;
        --gray: #ccc;
    }
    
    body {
        background-color: var(--main-bg);
        color: #ccc;
    }
    
    .container.content {
        background: transparent;
    }
    
.list-group-item {
    background-color: transparent;
    border: 1px solid transparent;
}
    
    .list-group-item-action {
        color: #ccc;
    }
    
.card {
    background-color: var(--second-bg);
    border: 1px solid transparent;
}
    
.emoji-item {
    border: 1px solid transparent;
}
    
    .card-footer {
        background: transparent;
    }
    
.emoji-item .card-footer {
    border-top: 1px solid var(--main-bg);
}
    
    .emoji-card .card-footer a.title {
        color: #fff;
    }
    
.emoji-item:hover {
    border: 1px solid var(--third-bg);
}
    
.btn-default {
    border: 1px solid var(--third-bg);
    color: #ccc;
}
    
.btn-default:hover {
    border: 1px solid var(--third-bg);
}
    
.btn:hover {
    color: #fff;
    text-decoration: none;
}
    
.navbar, .bg-light  {
    background: var(--second-bg) !Important;
}
    
    .navbar-light .navbar-nav .nav-link, .nav-link.btn-login {
        color: #ccc !important;
    }
    
.hero-bar {
    padding: 15px 0;
    background: #6e47e4;
    border-bottom: 1px solid var(--third-bg);
    }
    
    .container.extended-content.mb-4 {
        background: var(--second-bg);
    }
    
.footer-container, .page-explain.mt-3.mb-5 {
        display: none;
    }
    
    .card-item .title-item {
        color: #fff;
    }
    
.pack .card-body {
    border-top: 1px solid var(--third-bg);
    }
    
    .list-group-item-action:focus, .list-group-item-action:hover {
        background-color: transparent;
        color: #fff;
    }
    
    .form-control {
        background-color: var(--third-bg);
        color: #fff;
    }
    
    .hero-bar.hero-light.fixed .input-group {
        border: 1px solid var(--third-bg) !important;
    }
    
    #lite-search-input .input-group-text {
        background-color: var(--third-bg);
        color: #fff;
    }
    
    .btn-settings {
        background-color: var(--third-bg);
    }
    
    .hero-bar.hero-light .input-group .btn-settings:hover {
        background: var(--third-bg-hover) !important;
    }
    
    a.download.dl {
        color: #ccc;
    }
    
.btn-secondary {
    color: #fff;
    background-color: var(--second-bg);
    border-color: transparent;
}
    
.btn-secondary:hover {
    color: #fff;
    background-color: var(--third-bg);
    border-color: transparent;
    transition: 0.2s;
}
    
    .dropdown-menu-big {
        background-color: var(--third-bg);
    }
    
    .dropdown-menu {
        color: #fff;
        background-color: var(--third-bg);
    }
    
    .dropdown-menu-big .dropdown-item {
        color: #ccc !Important;
    }
    
    .nav-panel-social {
        display: none;
    }
    
    .dropdown-item {
        color: #ccc;
    }
    
    .dropdown-item:hover, .dropdown-item:active, .dropdown-item.active, .dropdown-item:focus {
        background-color: var(--second-bg);
        color: #fff;
        transition: 0.2s;
    }
    
::-webkit-scrollbar {
    width: 8px;
    background-color: var(--main-bg);
}
::-webkit-scrollbar-thumb {
background-color:#777;
    border-radius: 4px;
}
}