AniList Black Theme Plus

Makes the dark theme black and grey instead of midnight blue. Increases information density in a few places.

/* ==UserStyle==
@name        AniList Black Theme Plus
@description Makes the dark theme black and grey instead of midnight blue. Increases information density in a few places.
@author      Korakys
@namespace   anilist.co
@version     1.1.0
@license     CC0
==/UserStyle== */

@-moz-document domain("anilist.co") {
.site-theme-dark {
     --color-background: 0, 0, 0;
     --color-foreground: 31,35,45;
     --color-foreground-grey: 25, 29, 38;
     --color-foreground-grey-dark: 6,12,19;
     --color-foreground-blue: 15,22,31;
     --color-foreground-blue-dark: 6,12,19;
     --color-text: 230, 230, 230;
     --color-text-light: 179, 190, 203;
     --color-text-lighter: 183, 200, 215;
     --color-shadow-blue: 0,5,15;
     --color-background-1200: 251,251,251;
     --color-background-1100: 240,243,246;
     --color-background-1000: 221,230,238;
     --color-background-900: 201,215,227;
     --color-background-800: 173,192,210;
     --color-background-700: 139,160,178;
     --color-background-600: 116,136,153;
     --color-background-500: 100,115,128;
     --color-background-400: 81,97,112;
     --color-background-300: 30,42,56;
     --color-background-100: 21,31,46;
     --color-background-200: 0, 0, 0;
     --color-gray-1200: 251,251,251;
     --color-gray-1100: 240,243,246;
     --color-gray-1000: 221,230,238;
     --color-gray-900: 201,215,227;
     --color-gray-800: 173,192,210;
     --color-gray-700: 139,160,178;
     --color-gray-600: 116,136,153;
     --color-gray-500: 100,115,128;
     --color-gray-400: 81,97,112;
     --color-gray-300: 30,42,56;
     --color-gray-100: 21,31,46;
     --color-gray-200: 9,17,27;
}

 div.stats-wrap, div.section {
     --color-green: 32, 143, 255;
}
 .el-dropdown-menu {
     background-color: rgba(var(--color-foreground));
}
 .el-dropdown-menu, .el-dropdown-menu__item {
     color: rgba(var(--color-text));
}
 .el-dropdown-menu__item--divided::before {
     background-color: rgba(var(--color-foreground));
}
 .el-select-dropdown {
     background-color: rgba(var(--color-background));
}
 .el-select-dropdown__list {
     background: rgba(var(--color-background));
}
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
     background-color: rgba(var(--color-foreground));
     color: rgba(var(--color-text));
}
 .el-input, .el-textarea {
     background: rgba(var(--color-foreground));
     border-radius: 4px;
     color: rgba(var(--color-text));
}
 .quick-search .el-select .el-input .el-input__inner, .quick-search .el-select .el-input.is-focus .el-input__inner {
     background: rgba(var(--color-foreground));
}
 .user-social .user-follow .user:last-child::after {
     position: relative;
     left: 2px;
     top: -20px;
     opacity: 1;
     background: black;
}
 .feed-type-toggle > div.active[data-v-0375ca51] {
     background: rgba(var(--color-foreground-grey));
}
 div.header-wrap > div.header {
     background: rgba(var(--color-foreground));
}
 div.header-wrap > div > div > div.content > div {
     padding-top: 0px;
     background: rgba(var(--color-foreground));
}
 .view-all[data-v-bc8df890] {
     font-size: 1.2rem;
     cursor: pointer;
     font-weight: 500;
     transition: .2s;
     color: rgba(var(--color-text-lighter));
     margin-bottom: 18px;
     border-radius: 3px;
     display: block;
     padding: 10px;
     background-color: rgba(var(--color-foreground));
}
 div#nav.transparent {
     background: rgba(var(--color-foreground)) !important;
}
 .markdown-editor {
     margin-top: 10px !important;
     background: rgba(var(--color-text), 0.1) !important;
}
 .like[data-v-3403fd1b], .favourite[data-v-6fc01770] {
     border: solid 1px rgba(var(--color-red));
     background-color: rgba(var(--color-foreground));
}
 .section-header > .el-dropdown > .el-dropdown-menu {
     display: inline!important;
     background-color: transparent!important;
     margin-left: -500px;
     margin-top: -20px;
}
 .section-header > .el-dropdown > .el-dropdown-menu > .el-dropdown-menu__item {
     display: inline;
     list-style-type: none;
     background-color: transparent!important;
}
 .section-header > .el-dropdown > .el-dropdown-menu > .el-dropdown-menu__item:hover {
     background-color: transparent!important;
}
 .section-header > .el-dropdown > .el-dropdown-selfdefine {
     display: none;
}
 .banner-content .name {
     font-weight: bold;
     text-shadow: 2px 2px 2px rgba(0, 0, 0, 1);
}
/*****hoh fixes*****/
 .favourite.studio::after {
     margin-left: 2.5px !important;
}
 #app > .nav {
     border-top: none !important;
     background: rgba(var(--color-foreground)) !important;
}
 div.following > div {
     margin-top: 5px;
}
 .social > div:nth-child(2) > div:nth-child(2) {
     margin-top: 10px;
}
 .nav[data-v-bc28d33a] {
     background: rgba(var(--color-foreground));
     color: rgba(var(--color-text));
}
 .hohSubMenu {
     background: rgba(var(--color-foreground));
     color: rgba(var(--color-text));
}
 .hohTime {
     font-size: 16px;
}
 #dropdown-menu-6846 {
     font-size: 14px;
     font-weight: 500;
}
 .section-header > .el-dropdown > .el-dropdown-menu {
     margin-left: -24em;
     position: absolute !important;
}
.hohDownload {
    top: 0 !important;
    right: 0;
}

/*---Simple Feed---*/
 .hohFeed .hohButton {
     margin: 0px;
     filter: initial;
}
 .hohFeed > div > button {
     top: 15px !important;
}
 .hohFeed > div > button:nth-child(4) {
     left: 255px !important;
}
 .hohFeed > div > button:nth-child(5) {
     left: 350px !important;
}
 .hohFeed > div > .link.newTab {
     top: 17px !important;
     right: initial !important;
     left: 465px !important;
     font-size: 2rem !important;
}
 .container.termsFeed {
     margin-left: 15px !important;
}
 .sidebar {
     right: 20px !important;
     left: initial !important;
}
/*---Name spacing fixes---*/
 .header > .name {
     margin-left: 10px !important;
}
 .hohSocialTabActivityCompressedName, .name[data-v-1b55336e] {
     margin-left: 0px !important;
}
 .list .name[data-v-69758bac] {
     padding-bottom: 7px;
}
 .hohSocialTabActivityCompressedName {
     padding-top: 5px;
}
 .hohSocialTabActivityCompressedStatus {
     padding-top: 5px;
}
/*data*/
 .text .donator-badge[data-v-f6f14f80] {
     top: 19px;
}
/*ends*/
 .list-stats.content-wrap {
     margin-bottom: 1em !important;
}
/*———SITEWIDE———*/
 h2.link, .sidebar > .data > .data-set a {
     color: rgba(var(--color-blue));
}
/*---Activities---*/
.actions .action.replies .count {
     font-size: inherit;
}
 .wrap[data-v-6994d971] {
     font-size: 1.4rem;
}
 .actions[data-v-6994d971], .donator-badge[data-v-6994d971], .time[data-v-6994d971], .actions[data-v-0664fa9f] {
     font-weight: 600;
}
 .media-embed {
     display: inline-block;
}
/*---Nav bar---*/
 .wrap .link.router-link-exact-active.router-link-active, .nav .link.router-link-exact-active.router-link-active {
     background: rgba(var(--color-foreground-grey));
     color: rgba(var(--color-blue));
}
 .links[data-v-4fbac4e1] {
     font-size: 1.4rem;
     font-weight: 500;
     color: rgba(var(--color-text));
}
 .dropdown[data-v-38edf8f8] {
     left: 65px;
}
/*---Footer---*/
 .links a[data-v-5a740dfa] {
     padding: 0px;
}
 .links[data-v-5a740dfa] {
     font-size: 1.2rem;
     margin-left: initial;
}
 .page-content {
     min-height: initial;
}
 .wrap > .footer {
     background: rgba(var(--color-nav));
     padding: 7px;
     margin-top: 90px;
}
/*———HOME———*/
/*---Main feed container---*/
/*data*/
 .activity-feed-wrap[data-v-7b8d25f2] {
     margin-top: 0px;
     max-width: 50em;
}
 .home {
     max-width: 81em;
}
/*data*/
.reply-wrap .activity-replies .reply {
     margin-bottom: 5px;
}
 .el-checkbox__input.is-focus .el-checkbox__inner {
     border-color: rgba(var(--color-blue));
}
 .el-checkbox .el-checkbox__inner {
     background: rgba(var(--color-background));
}
 .markdown hr {
     border: solid 2px rgba(var(--color-text), 0.2);
}
 .list-editor-wrap .header:after {
     background: rgba(31, 40, 53, .15);
}
 .markdown-editor {
     border-radius: 3px;
     padding: 6px 20px;
     background: rgba(var(--color-text), 0.06);
}
 .markdown-editor .svg-inline--fa {
     height: 0.8em;
}
 .button.cancel {
     border-radius: 3px;
     padding: 5px 10px;
     height: 24px;
}
 .button.save {
     border-radius: 3px;
     padding: 5px 10px;
     height: 24px;
}
 .el-input, .el-textarea {
     border-radius: 3px;
}
 .btn.btn-danger {
     border-radius: 3px;
     padding: 7px 10px;
     font-size: 1.2rem;
}
 .el-scrollbar {
     border: 1px solid rgba(var(--color-text), 0.1);
}
 .el-popper[x-placement^=top] {
     background: rgba(var(--color-foreground-grey));
}
 .el-popper[x-placement^=top] .popper__arrow {
     border-top-color: rgba(var(--color-text), 0.1);
}
 .el-popper[x-placement^=top] .popper__arrow:after {
     border-top-color: rgba(var(--color-foreground));
}
 .markdown .markdown-spoiler:before {
     color: rgba(var(--color-blue));
}
/*———PROFILE———*/
 .activity-text .text {
     padding: 8px;
     padding-bottom: 20px;
}
 .activity-message .text {
     padding: 8px;
}
/*data*/
 .activity-feed-wrap[data-v-09492909] {
     margin-top: 11px;
}
/*data*/
 .overview[data-v-2cf72664] {
     margin-top: 20px;
}
/*data*/
 .history-day[data-v-514856af] {
     background: rgba(var(--color-background));
}
 .shadow {
     display: none;
}
 .activity-markdown p:first-of-type {
     -webkit-margin-before: 0;
}
 .activity-replies .reply {
     border-radius: 3px;
}
 .page-content > .container > .activity-entry .activity-replies {
     margin-top: 5px !important;
}
 .reply-markdown p:first-of-type {
     -webkit-margin-before: 0;
}
 .reply-wrap .activity-replies {
     margin: 5px 0px 20px 56px;
}
 .activity-entry .list {
     grid-template-columns: 60px auto;
     min-height: 83px;
}
 .image-overlay .behind-dot {
     border-radius: 0px 0px 2px 2px;
     height: 5px;
     right: 0;
     top: unset;
     width: 85px;
     bottom: 0;
}
 .list-preview .small.info-left .cover {
     border-radius: 3px;
}
 .list-preview .small .cover {
     border-radius: 3px;
}
 .media-preview-card.small .content {
     border-radius: 0 2px 2px 0;
}
 .details .entry-dropdown {
     left: 3px;
     top: 3px;
}
 .list-preview span > span:nth-of-type(3) {
     display: none;
}
 .media-preview .small .cover {
     border-radius: 3px;
}
 .list-preview .small .cover .image-text {
     border-radius: 0 0 2px 2px;
}
 .genre-overview .percentage {
     height: 3px;
}
 .genre-overview.content-wrap .genres {
     padding: 16px;
}
 .stats-wrap .milestones {
     font-size: 1rem;
     padding: 9px 0;
}
 .stats-wrap .progress {
     height: 3px;
}
 .stats-wrap .milestones .milestone:after {
     padding-top: 2px;
}
 .list.small {
     font-size: 1.3rem!important;
}
 .medialist.cards .entry-card .release-status {
     height: 15px;
     left: 0;
     top: 0;
     width: 15px;
     border-radius: 4px 0 4px 0;
     box-shadow: none;
     border: 1px solid #616161;
     border-left: none;
     border-top: none;
}
 .medialist.cards .entry-card .edit {
     right: 3px;
     top: 3px;
}
 .activity-entry .wrap {
     border-radius: 3px;
}
 .favourites .media-preview-card .title {
     color: rgba(var(--color-blue));
}
 .stat:not(:first-of-type) {
     border-left: 1px solid rgba(var(--color-foreground-grey));
}
 .actions .nav-btn {
     border-radius: 3px;
     font-size: 1.2rem;
     padding: 7px 10px;
}
 .user .overview .content-wrap {
     border-radius: 3px;
}
 .content-wrap > .stats-wrap {
     padding: 13px 10px;
}
 .genres .amount {
     margin-top: 16px;
}
 .markdown > div:last-of-type {
     -webkit-margin-after: 15px;
}
 .markdown > hr:last-child {
     margin-bottom: 15px;
}
 .banner-content .actions .nav-btn {
     padding-top: 4px;
     padding-bottom: 2px;
     padding-left: 7px;
     padding-right: 7px;
}
 .mod-badge-wrap.follower-badge{
     padding-bottom: 2px;
}
/*———ANIME/MANGA———*/
.header-wrap > .banner {
    height: calc(100vw / 5);
    max-height: 330px;
    margin-top: 0;
}
@media(max-width:760px) {
.header-wrap > .banner {
    height: 150px;
    margin-top: 0;
}
}
/*data*/
 .follow[data-v-69b91520] {
     padding: 5px 10px;
}
 .thread-card.small {
     margin-bottom: 10px !important;
    /*hoh override*/
     padding: 0.5em 1em !important;
    /*hoh override*/
    ;
}
 .media .header-wrap .banner {
     background-position: 50% 16%;
}
 .character .image {
     border-radius: 3px;
}
 .sidebar > .data {
     border-radius: 3px;
     padding: 12px;
}
 .sidebar .tags .tag {
     height: 30px;
     border-radius: 3px;
}
 .media-tag-editor .btn {
     border-radius: 3px;
     padding: 4px 10px;
}
 .list-editor-wrap .list-editor .body .input-wrap {
     place-content: start space-evenly;
}
/*---Score and status distribution boxes---*/
 .status-distribution {
     max-width: 40em;
}
 .media-score-distribution {
     max-width: 20em;
}
 .media-score-distribution .ct-bar {
     stroke-width: 7px;
}
 .media-score-distribution .ct-label, .media-score-distribution .label-text {
     opacity: 1;
}
 .percentage-bar .percentage {
     height: 4px;
}
 .status:nth-of-type(1) .name, .genre:nth-of-type(1) .name {
     color: rgba(104, 214, 57);
}
 .status:nth-of-type(2) .name, .genre:nth-of-type(2) .name {
     color: rgba(2, 169, 255);
}
 .status:nth-of-type(3) .name, .genre:nth-of-type(3) .name {
     color: rgba(146, 86, 243);
}
 .status:nth-of-type(4) .name, .genre:nth-of-type(4) .name {
     color: rgba(247, 121, 164);
}
 .status:nth-of-type(5) .name, .genre:nth-of-type(5) .name {
     color: rgba(232, 93, 117);
}
 .status .name, .genre .name {
     background: rgba(var(--color-foreground-grey)) !important;
     border-radius: 3px;
     font-size: 1.3rem;
}
/*———BROWSE———*/
 .search[data-v-0a4e74f9] {
     background: inherit;
}
 .filters-wrap[data-v-a679b1ba] {
     margin-right: inherit !important;
}
/* cards */
 [data-v-0a8281ec] .results {
     grid-gap: 1em 1em;
     grid-template-columns: repeat(auto-fill,8em);
}
 .media-card[data-v-3b24ed8f] {
     width: 8em;
}
 .cover[data-v-3b24ed8f] {
     height: 12em;
}
/* top bar */
 .extra-filters-wrap[data-v-458a983a] {
     margin: inherit;
     margin-bottom: inherit;
}
 .filters[data-v-458a983a] {
     margin: 0.5em 0 1em;
}
 .secondary-filters[data-v-036a9134] {
     margin-bottom: 1em;
}
/* dropdown */
 .dropdown[data-v-a679b1ba] {
     padding: 1em;
     top: -10px;
}
 .slider[data-v-2d804408] {
     margin-bottom: 1em;
}
 .tag-filtesr-wrap[data-v-a679b1ba] {
     padding-top: 1em;
}
 .tag-filtesr-wrap h3[data-v-a679b1ba] {
     margin-bottom: 1.5em;
}
 .filters-wrap[data-v-a679b1ba] {
     margin-bottom: 1em;
}
 .header-filters[data-v-128d71ac] {
     margin-bottom: 1em;
}
 .group[data-v-128d71ac] {
     margin-bottom: 0.5em;
}
 .tag[data-v-5760f120] {
     font-size: 1.3rem;
     font-weight: 500;
     margin-bottom: 0.5em;
     margin-right: 0.5em;
     padding: 0.25em 0.5em 0.15em;
}
 .title[data-v-128d71ac] {
     font-size: 1.4rem;
     font-weight: 600;
     margin-bottom: 0.5em;
}
/* dropdown tags viewport size */
 .scroll-wrap[data-v-128d71ac] {
     max-height: calc(100vh - 160px);
     min-height: 350px;
     overflow: auto;
     min-width: calc(100vh);
}
/*---STUDIO---*/
 .studio[data-v-6c44e68e] {
     background: inherit;
}
/*———FORUM———*/
/*---OP---*/
/*data x3 */
 .title[data-v-1f3305c5] {
     margin-top: 22px;
}
 .header[data-v-1f3305c5] {
     margin-bottom: 15px;
}
 .forum-thread .header .time {
     font-size: 1.2rem;
}
 .body[data-v-1f3305c5] {
     padding: 20px;
     margin-bottom: 0px;
     font-size: 1.5rem;
}
 .forum-thread > .body > .footer {
     padding-top: 10px;
}
/*---Buttons---*/
 .forum-thread .actions[data-v-695bbfa9] {
     margin-bottom: 0px !important;
}
 .forum-thread .button[data-v-695bbfa9] {
     height: inherit;
     padding: 7px 10px;
     font-size: 1.4rem;
     border-radius: 3px;
     border-width: 2px;
}
 .forum-thread .button.subscribe.subscribed {
     border-color: rgba(var(--color-blue));
     font-weight: bold;
}
 .forum-thread .button.comment {
     padding-left: 10px;
     padding-right: 15px;
}
 .forum-thread .button.comment .icon {
     margin-right: 5px;
}
 .footer > .actions > .button.like > .like-wrap > .button.liked {
     color: #ffaebc !important;
}
 .category {
     border-radius: 3px !important;
}
 .forum-thread .categories {
     align-items: center;
     display: flex;
     margin-top: 0px !important;
}
 .forum-thread .categories > span {
     margin-top: 0px !important;
}
/*---Comments---*/
/*data*/
 .forum-thread .comments-header[data-v-d8e54cfe] {
     margin-top: 5px;
}
/*data x5 */
 .forum-thread .comment[data-v-695bbfa9] {
     padding: 1em;
}
 .forum-thread .child[data-v-695bbfa9] {
     margin-left: 1em;
}
 .forum-thread .comment-wrap[data-v-695bbfa9] {
     margin-bottom: 1em;
}
 .forum-thread .comment-wrap.depth-0[data-v-695bbfa9] {
     padding-bottom: 1px;
     margin-bottom: 1em;
}
 .forum-thread .actions[data-v-695bbfa9] {
     margin-bottom: 0px !important;
     bottom: inherit !important;
     align-self: initial;
}
/*---Editor---*/
 .forum-thread .wrap .editor, .forum-thread .preview {
     padding-top: 10px;
     border: black 2px solid;
}
 .forum-thread .wrap .preview h2 {
     font-size: 1.8rem;
}
/*---Index---*/
 .feed .thread-card {
     padding: 12px;
     margin-bottom: 10px !important;
}
 .forum-feed .group-header {
     color: rgba(var(--color-text)) !important;
     font-weight: bold;
     background: rgba(var(--color-foreground), .6);
     padding: 6px;
     border-radius: 3px;
}
/*data*/
 .filter-group .router-link-active[data-v-35805f65]:not(.inactive) {
     background: rgba(var(--color-blue)) !important;
}
 .filter-group a:hover {
     background: rgba(var(--color-blue), .3) !important;
     color: rgba(255, 255, 255);
     transition: .2s;
}
 .filter-group > a {
     background: rgba(var(--color-foreground));
}
 .overview-header {
     font-size: 1.8rem !important;
}


/*———XXX———*/
}