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———*/
}