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;
        --color-card--subtitle: #ccc;
        --advanced-filter-search--showmore: #ccc;
        --color-quickfilter-color: #ccc;
    }
    
html {
    --site-background: var(--main-bg);
    --site-background--inverted: #000;
    --overlay-background: #fff;
    --callout-background: var(--third-bg).
    --row-background: rgba(25, 55, 103, 0.04);
    --color-theme: #ccc;
    --color-theme-bg: rgba(25, 55, 103, 0.08);
    --color-theme-m: #ccc;
    --color-theme--hov: #fff;
    --color-theme-bg--hov: #214988;
    --color-button: rgba(25, 55, 103, 0.06);
    --color-button-hov: #214988;
    --color-macro-button-bg: #F2F3F6;
    --color-macro-button-text: #fff;
    --color-macro-button-amazon-bg: #F2F3F6;
    --color-macro-button-amazon-text: #41669F;
    --color-macro-button-lezhin-bg: #ed1c24;
    --color-macro-button-lezhin-text: #FFF;
    --color-lezhin: #E70012;
    --color-jnc: #1166DD;
    --color-cta: #193767;
    --color-cta-2: #FC5342;
    --color-text: #ccc;
    --color-text--highlight: #ccc;
    --color-text--emphasis: #195399;
    --color-text--inverted: #FFF;
    --color-input-background: #F2F3F6;
    --color-input-border--focused: #193767;
    --color-input-text: #ccc;
    --color-input-text--hover: #4d4d4d;
    --color-alert-error: rgba(255, 0, 0, 0.1);
    --color-alert-success: #bfe86d;
    --color-alert-text: #ccc;
    --color-filter-include: #6C9717;
    --color-filter-exclude: #ff9f96;
    --color-link: #ccc;
    --color-link-alt: #1ea7f9;
    --color-link--hover: var(--orange);
    --color-link--light: #5aa5c5;
    --color-link-selected: var(--orange);
    --color-selection-selected: #865479;
    --color-selection-selected-hov: #9a638b;
    --color-tags-background: rgba(25, 55, 103, 0.08);
    --color-tags-background--hov: rgba(25, 55, 103, 0.08);
    --color-heading: #fff;
    --color-heading--hover: #154489;
    --color-input-bg: var(--third-bg);
    --color-input-nav-bg: rgba(25, 55, 103, 0.08);
    --color-textarea-bg: rgba(25, 55, 103, 0.08);
    --color-select-bg: rgba(25, 55, 103, 0.08);
    --color-toggle-off-bg: #515151;
    --color-autocomplete-bg: #fff;
    --color-autocomplete-color: #000;
    --color-autocomplete-color--hov: #193767;
    --color-modal--background: #fff;
    --color-quickfilter-color: #000;
    --color-quickfilter-color--link: #5aa5c5;
    --color-meter--bg: var(--third-bg);
    --color-discussions-poster--bg: #3e3e3e;
    --color-discussions-poster-medadata: #193767;
    --color-discussions-content--bg: #F2F3F6;
    --color-discussions-content-quote: #8C9BB3;
    --color-discussions-content-separator: #f2f3f6;
    --color-video-recommendations-tile-bg: #f9f8f4;
    --color-video-recommendations-quote-bg: var(--callout-background);
    --color-border: var(--third-bg);
    --border-style: 1px solid var(--color-border);
    --color-review--trophy: #195399;
    --color-characters--avatar: #5d0800;
    --color-card--background: #fff;
    --color-card--border: 0 1px 5px 0 rgba(0, 0, 0, 0.3);
    --color-card--title: #fff;
    --color-card--subtitle: rgba(0, 0, 0, 0.6);
    --color-card--comments: #B0B9C8;
    --color-username: #000;
    --color-review--content: #000;
    --color-review--date: #B0B9C8;
    --color-profile--userstats: #000;
    --color--inc-ep: var(--color-theme);
    --color-footer--background: #f7f7f7;
    --color-footer--link: #195399;
    --color-themetoggle--background: #D8D8D8;
    --color-themetoggle--icon-background: #fff;
    --color-themetoggle--icon: #193867;
    --advanced-filter-search--background: rgba(25, 55, 103, 0.04);
    --advanced-filter-search--inputbg: var(--third-bg);
    --advanced-filter-search-pillfilter--background: #fff;
    --advanced-filter-search-pillfilter--border: #e7e1d3;
    --advanced-filter-search-pillbottle-pill--bg: rgba(25, 55, 103, 0.04);
    --advanced-filter-search-pillbottle-pill--bghover: #fff;
    --advanced-filter-search-ratingslider--background: #5d0800;
    --advanced-filter-search-ratingslider--arrows: #000;
    --advanced-filter-search--showmore: #193767;
    --input-boxshadow: #ddd;
    --provider-logo--hd: url(/inc/img/video-providers/hdbutton.png);
    --heartSwitch-heartOn: #ec97a6;
    --social-twitter: #1da1f3;
    --social-facebook: #2d87ff;
    --social-instagram: #b12fb1;
    --social-vimeo: #16b5e6;
    --social-youtube: #fe0000;
    --social-tumblr: #1d3563;
    --social-pixiv: #0191f2;
    --social-spotify: #1dcf5d;
    --social-soundcloud: #f65111;
    --social-weibo: #e1152c;
    --social-website: #5d0800;
    --supporter-bronze: #bd8d5b;
    --supporter-silver: #bec2cb;
    --supporter-gold: #d4af37;
    --rating-slider: #f5f5f5;
    --rating-slider-dot: #ffffff;
    --font-fontawesome: "Font Awesome 6 Free";
    --ap-font-primary: 'Mulish';
}
    
    ::selection {
        background: var(--orange);
    }

/* width */
::-webkit-scrollbar {
  width: 5px;
}

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

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--orange);
}
    
html.darkmode {
    --site-background: var(--main-bg);
    --border-style: 1px solid transparent;
    --color-link: var(--orange);;
    --color-link--hover: var(--white);
    }
    
body, #siteContainer {
    background: var(--main-bg);
}
    
.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: #fff;
    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;
    color: #fff !important;
}
    
    .selected, .selected a {
        color: #fff !important;
    }
    
    .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);
    }
    
    .tags li:hover {
        background: var(--third-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)
    ...