/* ==UserStyle== @name AniList Darker @namespace github.com/DishankJ/AniList-Darker @version 1.0.4 @description Dark theme with red accent for AniList. @author Dishank Jaiswal @homepageURL https://github.com/DishankJ/AniList-Darker @supportURL https://github.com/DishankJ/AniList-Darker/issues @downloadURL none ==/UserStyle== */ @-moz-document url-prefix("https://anilist.co") { .feed-type-toggle > div.active[data-v-7b8d25f2] { background: #1f1f1f; color: #ff6961; font-weight: 500; } .feed-type-toggle > div[data-v-7b8d25f2]:hover { color: rgb(255, 142, 136, .7); } .info-header[data-v-4b71d7c6] { color: #ff6961; font-size: 1.2rem; font-weight: 500; margin-bottom: 8px; } .name[data-v-6c3dc0b8] { color: #ff6961; font-weight: 405; display: inline-block; font-size: 1.4rem; } .airing-countdown .value[data-v-c657baee] { color: #ff6961; font-weight: 500; } .name span[data-v-70ae1ba4] { color: #ff6961; } .create-btn[data-v-0064307c] { background: #ff6961; border-radius: 4px; color: #fff; display: block; font-size: 1.4rem; margin-bottom: 24px; padding: 11px 16px; text-align: center; width: 100%; } .list .title[data-v-6c3dc0b8] { color: #ff6961; } .site-theme-dark { --color-background: 32, 32, 32; --color-foreground: 24, 24, 24; --color-foreground-grey: 15, 22, 31; --color-foreground-grey-dark: 6, 12, 19; --color-foreground-blue: 15, 22, 31; --color-foreground-blue-dark: 6, 12, 19; --color-text: 159, 173, 189; --color-text-light: 114, 138, 161; --color-text-lighter: 133, 150, 165; --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: 32, 32, 32; --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: 11, 22, 34; } .details .link[data-v-9132cd06] { color: #ff6961; } .el-checkbox__input.is-checked + .el-checkbox__label { color: #ff6961; } .expand-description[data-v-7ea10afe]:hover { color: #ff8e88; } .wrap[data-v-544390d2] { -webkit-user-select: none; -ms-user-select: none; user-select: none; background-color: rgb(40, 40, 40); position: relative; } .type[data-v-544390d2] { background: rgb(30, 30, 30); border-radius: 6px; display: inline-flex; align-items: center; padding: 3px 12px; padding-top: 7px; } @media (max-width: 700px) { .mobile-background[data-v-66608714] { background: #191919; position: absolute; width: 100%; height: 200px; top: 0; left: 0; z-index: 1; } } @media (max-width: 700px) { .mobile-background[data-v-7ea10afe] { background: #191919; } } .header[data-v-66608714] { background: #191919; padding-bottom: 30px; padding-top: 50px; } .mobile-filters[data-v-458a983a] { align-items: center; display: grid; background-color: rgb(40, 40, 40); grid-gap: 15px; grid-template-columns: auto 42px; margin-top: 20px; padding: 0 20px; margin-bottom: 20px; } .mobile-filters .search-wrap[data-v-458a983a] { align-items: center; grid-gap: 12px; background-color: rgb(30, 30, 30); height: 42px; } .primary-filters[data-v-7a42bb24] { z-index: 700; background-color: rgb(40, 40, 40); } .filters-wrap[data-v-458a983a] { display: grid; grid-template-columns: auto 42px; background-color: rgb(40, 40, 40); align-items: center; } .progress[data-v-815ccddc] { background: rgb(30, 30, 30); height: 11px; padding: 0 16.5%; } .reset-btn[data-v-0a867854] { background: #ff6961; border-radius: 3px; color: #fff; cursor: pointer; display: block; font-size: 1.3rem; margin-bottom: 25px; padding: 10px 14px; text-align: center; width: 100%; } .open-btn[data-v-458a983a] { align-items: center; background: rgb(30, 30, 30); border-radius: 6px; color: rgb(var(--color-gray-500)); cursor: pointer; display: inline-flex; font-size: 1.8rem; height: 42px; justify-content: center; width: 42px; transition: color .3s ease-in-out; } .secondary-filters[data-v-7a42bb24] { align-items: center; display: grid; grid-template-columns: auto -webkit-min-content; grid-template-columns: auto min-content; background-color: rgb(40, 40, 40); margin-bottom: 30px; min-height: 23px; position: relative; } .search[data-v-7a42bb24] { font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; background: rgb(40, 40, 40); min-height: 100vh; } .footer[data-v-6f9ee47f] { background: #181818; color: #7a858f; color: #a0b1c5; font-weight: 600; margin-top: 20px; min-height: 100px; padding: 50px 30px; text-align: left; width: 100%; } .banner[data-v-b5c85c0a] { height: 263px; } @media screen and (max-width: 760px){ .banner[data-v-b5c85c0a] { height: 130px; } } .el-message--success .el-message__content { color: #ff8e88; } .el-icon-success:before { color: #ff8e88; } a:hover { color: #ff6961; } .el-message--success { background-color: rgba(16,16,16,.75); border: 0px solid black; } .status-distribution[data-v-515ea5f2] { grid-area: status; display: none; } .sense-wrap.above-fold[data-v-515ea5f2] { margin-bottom: 20px; max-height: 150px; display: none; } .episodes[data-v-515ea5f2] { display: none; } .cover[data-v-57a114e8] { background: rgb(30, 30, 30); border-radius: 4px; cursor: pointer; display: inline-block; height: 265px; overflow: hidden; position: relative; width: 100%; z-index: 5; } .header[data-v-7ea10afe] { background: #191919; padding-bottom: 30px; padding-top: 50px; } .hamburger[data-v-8aeb5e9a], .menu[data-v-8aeb5e9a] { background: #181818; border-radius: 6px; box-shadow: 0 1px 20px rgba(18, 18, 18, .3); } .hamburger svg[data-v-8aeb5e9a] { color: #ff6961; } .filter-toggle.active[data-v-0064307c] { color: #ff6961; } .button[data-v-93c5960c] { align-items: center; background: #ff6961; border-radius: 4px; color: rgb(var(--color-text-bright)); cursor: pointer; display: inline-flex; font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 1.3rem; font-weight: 900; margin-left: 18px; padding: 10px 15px; transition: .2s; } .feed-filter.active[data-v-7b8d25f2] { opacity: 1; color: #ff6961; } element.style { position: absolute; top: 297px; background-color: #181818; left: 144px; transform-origin: center bottom; z-index: 2002; } element.style { position: absolute; top: 297px; left: 144px; background-color: #181818; transform-origin: center bottom; z-index: 2001; } .el-popper[x-placement^=top] .popper__arrow:after { bottom: 1px; margin-left: -6px; border-top-color: #181818; border-bottom-width: 0; } .el-dropdown-menu__item.active { color: #ff8e88; font-weight: 500; } .el-dropdown-menu__item:focus, .el-dropdown-menu__item:not(.is-disabled):hover { background: #ff6961; color: rgb(var(--color-white)); } .name[data-v-5a191921] { color: #ff6961; display: inline-block; font-size: 1.3rem; height: 25px; line-height: 25px; margin-left: 6px; vertical-align: top; } .actions .action[data-v-6c3dc0b8]:hover { color: #ff8e88; } .liked[data-v-b23584ce] { color: #ff8e88; } .liked[data-v-b23584ce] { color: #ff6961; } .list-editor-wrap .header .save-btn { background: #ff6961; border-radius: 3px; color: rgb(var(--color-white)); cursor: pointer; font-size: 1.3rem; margin-bottom: 15px; padding: 8px 14px; } .sticky .pin[data-v-70ae1ba4] { color: #ff8e88; margin-right: 10px; } .user[data-v-28c2b0a4] { align-items: center; color: #ff6961; display: flex; } .markdown .markdown-spoiler:before { color: #ff8e88; cursor: pointer; background: rgb(30, 30, 30); border-radius: 3px; content: "Click to view Spoiler"; font-size: 1.3rem; padding: 0 5px; } .button.comment[data-v-28c2b0a4] { background: #ff8e88; padding-left: 15px; padding-right: 30px; } .user[data-v-768af104] { align-items: center; color: #ff6961; display: flex; } .user-page-unscoped.red .progress .bar { background: linear-gradient(270deg, #ff6961, #ff8e88); } .filter-toggle.active[data-v-0a867854] { color: #ff6961; } .el-checkbox__input.is-checked .el-checkbox__inner { background-color: #181818; border-color: #ff8e88; } .el-checkbox .el-checkbox__inner { background: #181818; border-color: #ff8e88; } .markdown-editor > div:hover { color: #ff8e88; } .nav .link[data-v-b5c85c0a]:hover { color: #ff8e88; } .favourite[data-v-9b6efc52] { align-items: center; background: rgb(16, 16, 16, .7); border-radius: 5px; color: rgb(var(--color-white)); cursor: pointer; display: flex; font-size: 1.4rem; font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-weight: 800; height: 35px; justify-content: center; padding-left: 1px; transition: .2s; padding: 0 14px; } .favourite.isFavourite[data-v-9b6efc52] { color: #ff8e88; } .list[data-v-b5c85c0a] { align-items: center; background: #ff6961; border-radius: 3px; color: rgb(var(--color-white)); cursor: pointer; display: flex; font-size: 1.4rem; height: 35px; justify-content: center; line-height: 1.3rem; } .search-wrap[data-v-458a983a] { background: rgb(30, 30, 30); border-radius: 6px; font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; font-size: 1.3rem; font-weight: 600; grid-gap: 10px; grid-template-columns: 13px auto 13px; letter-spacing: .03rem; padding: 11px 16px; padding-left: 13px; } .select[data-v-0f4acdbb] { align-items: center; border-radius: 6px; cursor: pointer; background: rgb(30, 30, 30); display: grid; font-size: 1.3rem; font-weight: 600; grid-template-columns: auto 20px; letter-spacing: .03rem; padding: 11px 16px; } .open-btn.active[data-v-a679b1ba], .open-btn[data-v-a679b1ba]:hover { color: #ff6961; } .open-btn[data-v-a679b1ba] { align-items: center; background: rgb(30, 30, 30); border-radius: 6px; color: rgb(var(--color-gray-500)); cursor: pointer; display: inline-flex; font-size: 1.8rem; height: 38px; justify-content: center; margin-top: 37px; width: 38px; transition: color .3s ease-in-out; } .dropdown[data-v-a679b1ba] { background: #181818; border-radius: 10px; padding: 40px; padding-bottom: 0; position: absolute; top: 100%; margin-top: 10px; right: 0; z-index: 60; } .options[data-v-0f4acdbb] { background: rgb(30, 30, 30); border-radius: 6px; left: 0; position: absolute; top: calc(100% + 10px); width: 100%; z-index: 50; } .open-btn.active[data-v-458a983a] { color: #ff6961; } h2[data-v-6f9ee47f] { color: #ff6961; font-size: 1.6rem; font-weight: 700; padding-bottom: 14px; } .site-theme-dark .nav-unscoped.transparent:hover { background: #181818; color: #a0b1c5; } .site-theme-dark .nav-unscoped { background: #181818; color: #a0b1c5; } .site-theme-dark .nav-unscoped.transparent { background: rgba(24, 24, 24, .4); color: #e5e7ea; } .feed-filter[data-v-7b8d25f2]:hover { color: #ff8e88; } .media-preview[data-v-796abd11] .media-preview-card .content { background: rgb(40, 40, 40); } .time .action[data-v-6c3dc0b8]:hover { color: #ff8e88; } .load-more[data-v-6f203cf2]:hover { color: #ff8e88; box-shadow: 0 2px 20px 0 rgba(6, 13, 34, .05); } .dropdown[data-v-38edf8f8] { background: rgb(30, 30, 30); border-radius: 6px; left: -5px; opacity: 0; pointer-events: none; position: absolute; top: 32px; transition: opacity .2s ease; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: 270px; } .dropdown[data-v-0bb70ffa] { background: rgb(30, 30, 30); border-radius: 6px; font-family: Overpass, -apple-system, BlinkMacSystemFont, Segoe UI, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; opacity: 0; pointer-events: none; position: absolute; top: 50px; transition: opacity .2s ease; -webkit-user-select: none; -ms-user-select: none; user-select: none; width: 200px; right: -80px; } .airing-countdown[data-v-c657baee] { color: #9fadbd; } .site-theme-dark .quick-search { background: rgba(17, 17, 17, .85); } .input .icon.right[data-v-bcbe965e]:hover { color: #ff6961; } .input .icon.right[data-v-bcbe965e]:hover { color: #ff6961; transition-duration: .5s; } .size-toggle[data-v-6aea970d]:hover { color: #ff6961; } .dropdown[data-v-38edf8f8]:before { width: 0; height: 0; content: ""; z-index: 2; transform: scale(1.01); border-bottom: .6rem solid rgb(30, 30, 30); border-left: .4rem solid transparent; border-right: .4rem solid transparent; bottom: 100%; color: rgb(30, 30, 30); left: 15%; position: absolute; } .dropdown[data-v-0bb70ffa]:before { width: 0; height: 0; content: ""; z-index: 2; transform: scale(1.01); border-bottom: .6rem solid rgb(30, 30, 30); border-left: .4rem solid transparent; border-right: .4rem solid transparent; bottom: 100%; color: rgb(30, 30, 30); right: 92px; position: absolute; } .banner .shadow[data-v-b5c85c0a] { background: rgba(17, 17, 17, .4); height: 100%; width: 100%; } [data-v-bcbe965e] .result:hover { background-color: #ff6961; } [data-v-bcbe965e] .result .open-list-editor { align-items: center; background: hsla(0, 0%, 100%, .45); border-radius: 50px; color: #fff; display: flex; height: 24px; justify-content: center; opacity: 0; position: absolute; right: 10px; top: calc(50% - 12px); transition: opacity .3s ease; width: 24px; } .el-dialog__headerbtn:focus .el-dialog__close, .el-dialog__headerbtn:hover .el-dialog__close { color: #ff6961; } } @-moz-document regexp("^https://anilist.co/anime/.*/.*/watch") { @media screen and (max-width: 760px) { .external-links[data-v-da429fba] { display: inline; } } @media (max-width: 1040px) { .watch[data-v-7e52d138] { margin-top: 20px; } } @media (max-width: 760px) { .data[data-v-c657baee] { display: none; } } .content[data-v-da429fba] { margin-top: 18.5px; } } @-moz-document regexp("^https://anilist.co/manga/.*/.*/stats") { @media screen and (max-width: 760px) { .external-links[data-v-da429fba] { display: inline; } } @media screen and (max-width: 760px) { .data[data-v-c657baee] { display: none; } } .content[data-v-da429fba] { margin-top: 18.5px; } }