Anime-Planet - Amoled by xiggi

/* ==UserStyle==
@name           Anime-Planet - Amoled
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    Deep dark theme for Anime-Planet
@author         xiggi
==/UserStyle== */

@-moz-document url-prefix("https://www.anime-planet.com/") {
    :root {
        /** Backgrounds **/
        --main-bg: #000;
        --second-bg: rgb(12, 12, 12);
        --second-bg-rgb: 12, 12, 12;
        --third-bg: rgb(31, 31, 31);
        --third-bg-hover: rgb(31 31 31 / 80%);;
        
        /** Colors **/
        --white: #fff;
        --gray: #777;
        --orange: #fc5342;
    }
    
html.darkmode {
    --site-background: var(--main-bg);
    --border-style: 1px solid transparent;
    --color-link: var(--orange);;
    --color-link--hover: var(--white);
    }
    
.bg-themeColor {
    background: var(--second-bg);
}
    
    button, .button {
        background-color: var(--second-bg);
        box-shadow: none;
        color: #ccc;
    }
    
    button, .button:hover {
        background-color: var(--third-bg);
        transition: 0.2s;
    }
    
button.cta, .button.cta {
    color: #FFF;
    background-color: var(--third-bg);
}
    
button.cta:hover, .button.cta:hover {
    background-color: var(--orange);
    transition: 0.2s;
}
    
.statusBand .increment {
    color: #FFF;
    background-color: var(--third-bg);
}
    
.statusBand .increment:hover {
    background-color: var(--orange);
    transition: 0.2s;
}
    
    .macro_button--secondary {
        background-color: var(--second-bg);
    }
    
    .macro_button--secondary:hover {
        background-color: var(--third-bg);
    transition: 0.2s;
    }
    
    .macro_button {
        background-color: var(--second-bg);
        color: var(--orange);
            }
    
    .macro_button:hover {
        background-color: var(--orange);
    transition: 0.2s;
    }
    
    #siteHeader {
    background: rgb(12 12 12 / 90%);
    backdrop-filter: blur(10px) !important;
    }
    
    .Login {
        background: var(--second-bg);
    }
    
.Login .LoginActions button[data-v-41775e0c] {
    background: var(--third-bg);
    color: #fff;
}
    
.Login .LoginActions button[data-v-41775e0c]:hover {
    background: var(--color-cta-2);
    color: #fff;
    transition: 0.2s;
}
    
#siteNav > ul > li ul, #siteUser .loggedIn ul {
    background-color: var(--second-bg);
    box-shadow: 1px 1px 10px var(--second-bg);
    }
    
#siteNav > ul > li ul a, #siteUser .loggedIn ul a:hover {
    color: var(--orange);
    background: var(--third-bg;);
    transition: 0.2s;
    }
    
    #siteNav > ul > li:hover a:hover, #siteUser:hover .loggedIn a:hover {
    color: var(--orange);
    background: var(--third-bg;);
    transition: 0.2s;
    }
    
    .card .crop img:hover, .mainEntry img:hover, .tableAvatar img:hover {
        opacity: 50%;
        transition: 0.2s;
    }
    
    .cta {
    background: var(--second-bg);
    }
    
    .subNav {
    background: var(--second-bg);
    }
    
.subNav li:hover {
    background: var(--third-bg);
    transition: 0.2s;
}
    
.subNav li.selected {
    background: var(--orange);
    font-weight: 600;
}
    
    .profLoa {
    background: var(--second-bg);
    }
    
.pure-table.striped tr:nth-child(2n) td {
    background-color: var(--second-bg);
}
    
    .rounded-card {
    background-color: var(--second-bg);
    }
    
.CharacterCard__actions--old {
    border: 1px solid transparent;
}
    
.CharacterCard__action--old:nth-child(2) {
    border-left:  1px solid transparent;
}
    
.CharacterCard__action--old.CharacterCard__action--bolded[data-action="like"] {
    color: #d4304c;
    background-color:#4c151e;
}
    
.tabs .tab {
    background: var(--second-bg);
    border: 1px solid transparent;
}
    
.tabs ul.tabsUl li[class*="active"] a {
    cursor: default !important;
    color: var(--color-text);
    font-weight: bold;
    background: var(--second-bg);
    border-color: transparent;
}
    
    .tabs ul.tabsUl li a:hover {
        background: var(--third-bg);
        color: var(--orange);
        transition: 0.2s;
    }
    
    .statusArea {
        text-align: center;
        font-weight: 600;
    }
    
.status0:before, .status1:before, .status2:before, .status3:before, .status4:before, .status5:before, .status6:before{
        margin-right: 5px;
    }
    
    .tags li {
        background: var(--second-bg);
    }
    
#siteFooter {
    background: var(--second-bg);
    display: none;
}
    
#siteFooter > * {
    background: var(--second-bg);
}
    
#siteFooter nav a {
    color: var(--orange)
}
    
#siteFooter nav a:hover {
    color: var(--white)
    transition: 0.2s;
}
    
#siteFooter a {
    color: var(--orange)
}
    
#siteFooter a:hover {
    color: var(--white)
    transition: 0.2s;
}
    
    #siteFooter p {
    color: var(--gray) 
    }
    
#siteFooter .lightswitch_button {
    border-radius: 5px;
    background-color:var(--main-bg);
    color: var(--orange);
}
    
#siteFooter .lightswitch_button:hover {
    background-color: var(--third-bg);
    transition: 0.2s;
    color: var(--white);
}
    
#siteFooter .lightswitch_button span {
    color:var(--orange);
    border-radius: 5px;;
    background-color: var(--second-bg);
    transition: transform 0.3s;
    margin-left: 5px;
}
    
.footer-social ul li a {
    background-color: var(--third-bg);
    border-radius: 5px;
}
    
.footer-social ul li a:hover {
    background-color: var(--orange);
    transition: 0.2s;
}
    
#siteFooter .footer-copyright {
    font-size: 13px;
    text-align: center;
}
    
.quickFilter a {
    color: var(--gray);
}
    
.quickFilter a:hover {
    color: var(--white);
    background: var(--gray-bg)
    transition: 0.2s;
}
    
    .ui-dialog .ui-dialog-content {
        background-color: var(--second-bg);
    }

.ui-dialog {
        background-color: var(--third-bg);
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 1px 1px 20px var(--third-bg);
}
    
.ListManagementTabs .ListManagementTabs__navigation .ListManagementTabs__navigation__item .ListManagementTabs__link {
    background-color: var(--second-bg);
    }
    
.pagination .selected, .alpha .selected {
    background-color: var(--third-bg);
    font-family: 'Lato-Black';
    color: var(--orange) !important;
}
    
    .pagination .selected a, .alpha .selected a {
    color: var(--white) !important;
    }
    
    .pagination a, .alpha a {
        font-weight: 600;
    }
    
.pagination .selected:hover, .alpha .selected:hover {
    background-color: var(--orange) !important;
    color: var(--white) !important;
    transition: 0.2s;
}
    
.pagination li {
    margin: 0;
    padding: 15px;
    color: #ccc;
}
    
    .pagination a, .alpha a {
        color: inherit;
    }
    
    .pagination li:hover, .alpha li:hover {
        color: #fff;
    }
    
.AdvancedFilter .tab {
    margin-top: -2px;
    border: 2px solid transparent !important;
    background: var(--second-bg);
}
    
.pillFilters {
    background-color: var(--second-bg);
    border: 2px solid transparent;
    }
    
.pillBottle .pill {
    background-color: var(--second-bg);
    color: var(--color-text);
    border: 1px solid var(--third-bg);
    }
    
.pillBottle .pill:hover {
    background: var(--third-bg-hover);
    transition: 0.2s;
}
    
.ListManagementTabs .ListManagementTabs__navigation .ListManagementTabs__navigation__item {
    border-bottom: 3px solid var(--third-bg);
    margin-bottom: -1px;
    padding-bottom: 1px;
}

a#ui-id-31:hover {
    background: var(--third-bg);
    color: var(--orange);
    transition: 0.2s;
    }
    
.ListManagementTabs .ListManagementTabs__navigation .ListManagementTabs__navigation__item.ui-tabs-active .ListManagementTabs__link {
    color: var(--orange);
    }
    
select {
    color: var(--white);
    background-color: var(--third-bg);
    box-shadow: none;
}
    
.touchRateTable td {
    border: 1px solid var(--third-bg) !important;
    }
    
.touchRateTable td.starrating.selected {
    border: var(--border-style) !important;
    border-radius: 5px;
    background-color: var(--third-bg);
}
    
    .subNav a {
        color: var(--color-theme-m);
    }
    
.status0:before, .status1:before, .status2:before, .status3:before, .status4:before, .status5:before, .status6:before {
    border-radius: 1px;
}
    
    .CharacterCard__action--old:hover, .heartSwitch a:hover {
        background: var(--orange);
        color: var(--white);
    }
    
    .RecentDiscussion__discussion {
        background-color: var(--third-bg);
    }
    
    .RecentDiscussion__discussion::after {
        background:  var(--third-bg);
    }
    
    .RecentDiscussion__discussion::before {
        color: var(--white);
    }
    
    .RecentDiscussion__date, .RecentDiscussion__time {
        color: var(--white);
    }
    
    .statusArea {
        background: var(--second-bg);
    }
    
    .tags li a:hover {
        color: var(--white);
    }
    
    a#advanced_filter_tags {
        color: var(--orange);
    }
    
    a#advanced_filter_tags:hover {
        color: var(--white);
        transition: 0.2s;
    }
    
.statusArea {
    padding: 10px 10px;
}
    
    .statusArea .ttRating {
        color: #ebc202;
    }
    
    span.darkModeIcon:hover {
        color: var(--orange);
        transition: 0.2s;
    }
    
    .tableCharInfo a:hover {
        color: var(--white);
        transition: 0.2s;
    }
    
    .rounded-card:hover {
        background: var(--third-bg);
        transition: 0.2s;
    }
    
    .authorDate a:hover {
        color: var(--white);
        transition: 0.2s;
    }
    
.cta .rated:hover, .horizontal-cta > a:first-child:hover, .recoCta > span, .horizontal-cta > a:hover {
        color: var(--orange);
        transition: 0.2s;
    }
    
    .cta .reviewTypes {
        color: var(--white);
    }
    
.pure-form select {
    border: 1px solid transparent;
    background-color: var(--third-bg);
}
    
.pure-form select, ....