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 0.9.1
@license CC0
==/UserStyle== */
@-moz-document regexp("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;
}
/*
.site-theme-dark {
--color-background: 0, 0, 0;
--color-text: 230, 230, 230;
--color-text-light: 179, 190, 203;
--color-text-lighter: 183, 200, 215;
--color-foreground: 31, 35, 45;
--color-footer: 17, 22, 29;
--color-foreground-grey: 25, 29, 38;
}*/
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: -250px;
position: absolute !important;
}
/*---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 .count[data-v-6994d971]
{
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[data-v-0bf5aadf]
{
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;
}
.actions .count[data-v-568e7548]
{
font-size: inherit;
}
.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;
}
/*———ANIME/MANGA———*/
/*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———*/
}