Greasy Fork is available in English.
Adjusts the dark-theme to have higher contrast and some other tweaks.
ของเมื่อวันที่
/* ==UserStyle==
@name AniList High-Contrast Dark-Theme
@description Adjusts the dark-theme to have higher contrast and some other tweaks.
@author Reina
@namespace https://github.com/Reinachan
@homepageURL https://github.com/Reinachan/AniList-High-Contrast-Dark-Theme
@supportURL https://anilist.co/user/Reina/
@version 1.6.1
@license MIT
@preprocessor less
==/UserStyle== *///* no-mobile-start */
@-moz-document domain("anilist.co"), domain("anichart.net") {
/* no-mobile-end */
:root {
--color-background: 14, 18, 22;
--color-blue: 120, 180, 255;
--color-shadow-blue: 0, 0, 0;
--color-foreground: 20, 25, 31;
--color-foreground-alt: 18, 23, 29;
--color-foreground-blue: 26, 33, 45;
--color-foreground-grey: 15, 22, 28;
--color-foreground-grey-dark: 6, 12, 13;
--color-background-300: 30, 42, 56;
--color-background-100: 19, 24, 32;
--color-background-200: 14, 18, 22;
--color-text: 240, 240, 240;
--color-text-light: 220, 230, 240;
--color-text-lighter: 230, 230, 240;
--color-text-bright: 255, 255, 255;
--color-blue-100: 247, 250, 252;
--color-blue-200: 236, 246, 254;
--color-blue-300: 201, 232, 255;
--color-blue-400: 143, 215, 255;
--color-blue-500: 111, 200, 255;
--color-blue-600: 61, 180, 242;
--color-blue-700: 8, 143, 214;
--color-blue-800: 12, 101, 166;
--color-blue-900: 11, 70, 113;
--color-blue-1000: 16, 61, 85;
}
.site-theme-dark {
--color-blue: 120, 180, 255;
--color-shadow-blue: 8, 10, 16, 0.5;
--color-foreground: 20, 25, 31;
--color-foreground-alt: 18, 23, 29;
--color-background: 14, 18, 22;
--color-foreground-blue: 26, 33, 45;
--color-foreground-grey: 15, 22, 28;
--color-foreground-grey-dark: 6, 12, 13;
}
.site-theme-dark {
/* Notification Dropdown */
--color-background-300: 30, 42, 56;
--color-background-100: 19, 24, 32;
--color-background-200: 14, 18, 22;
/* Text */
--color-text: 240, 240, 240;
--color-text-light: 220, 230, 240;
--color-text-lighter: 230, 230, 240;
--color-text-bright: 255, 255, 255;
/* Blue Colours */
--color-blue-100: 247, 250, 252;
--color-blue-200: 236, 246, 254;
--color-blue-300: 201, 232, 255;
--color-blue-400: 143, 215, 255;
--color-blue-500: 111, 200, 255;
--color-blue-600: 61, 180, 242;
--color-blue-700: 8, 143, 214;
--color-blue-800: 12, 101, 166;
--color-blue-900: 11, 70, 113;
--color-blue-1000: 16, 61, 85;
}
/* Navbar */
#app {
.nav-unscoped {
background: rgb(20, 25, 31);
color: #eaeeff;
&.transparent {
background: rgba(20, 25, 31, 0.5);
color: #eaeeff;
&:hover {
background: rgb(20, 25, 31);
color: #eaeeff;
}
}
}
}
.nav[data-v-e2f25004] {
background: #181a32;
}
.banner-image[data-v-e2f25004] {
filter: grayscale(50%);
}
/* Small screens adjustment */
.page-content > .container, .page-content > .user > .container {
@media screen and (max-width: 600px) {
padding-left: 2px;
padding-right: 2px;
}
}
/* Coloured Text */
.name[data-v-5e514b1e] {
color: rgb(var(--color-blue));
}
.site-theme-dark .user-page-unscoped.pink {
--color-blue: 252, 157, 214;
}
/* Dropdown menu */
.el-dropdown-menu.el-popper.el-dropdown-menu--medium {
width: 150px;
text-align: center;
background-color: rgb(var(--color-foreground-grey-dark))!important;
box-shadow: 0 1px 10px 0 rgba(var(--color-shadow-blue));
.el-dropdown-menu__item:hover {
background-color: rgb(var(--color-foreground-alt))!important;
}
.el-dropdown-menu__item--divided {
border-top: 3px solid rgb(var(--color-foreground-alt));
width: 90%;
margin: auto;
&:before {
background-color: rgb(var(--color-foreground-grey-dark))!important;
}
}
}
.el-dropdown-menu.el-popper.el-dropdown-menu--medium.activity-extras-dropdown {
text-align: left;
}
/* List editor dropdown menu */
.el-select-dropdown.el-popper {
background-color: rgb(var(--color-foreground-grey-dark))!important;
}
.el-select-dropdown {
box-shadow: 0 1px 10px 0 rgba(var(--color-shadow-blue));
}
.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
background-color: rgb(var(--color-background))!important;
}
/* Activity Textareas */
.activity-edit {
.input.el-textarea {
/* Add bottom padding only in Firefox as other browsers
displays this correctly already */
@media all and (min--moz-device-pixel-ratio: 0) {
padding-bottom: 5px;
}
textarea {
box-shadow: none;
overflow: hidden;
transition: height 0.1s;
will-change: height;
}
}
}
/* Activity Feed Sort */
.feed-select,
.section-header {
.el-dropdown {
margin-right: 10px;
.feed-filter,
.el-dropdown-link {
display: none;
}
.el-dropdown-menu {
display: flex !important;
position: relative;
text-align: center;
margin: 0;
padding: 0;
box-shadow: none;
background-color: rgb(var(--color-foreground));
border-radius: 3px;
.el-dropdown-menu__item {
line-height: inherit;
font-size: 1.2rem;
font-weight: 400;
white-space: nowrap;
flex-grow: 1;
margin: 0;
padding: 6px 10px;
color: rgb(var(--color-text-lighter));
border-radius: 3px;
&:hover {
background-color: inherit;
color: rgb(var(--color-blue));
}
&.active,
&:active,
&:focus {
font-weight: 500;
background-color: rgb(var(--color-foreground-blue));
color: rgb(var(--color-text));
border-radius: 0;
&:hover {
background-color: rgb(var(--color-foreground-blue));
}
}
&:active:first-of-type,
&:first-of-type.active,
&:focus:first-of-type {
border-radius: 3px 0 0 3px;
}
&:active:last-of-type,
&:last-of-type.active,
&:focus:last-of-type {
border-radius: 0 3px 3px 0;
}
}
}
}
}
.overview .section-header {
align-items: center;
display: flex;
.el-dropdown {
margin-right: 0px;
margin-left: auto;
padding-right: 0;
}
}
/* Announcement */
.announcement {
background-color: rgb(var(--color-blue-800))!important;
}
/* Date Picker */
.el-picker-panel {
border: 1px solid rgb(var(--color-foreground));
background-color: rgb(var(--color-foreground-grey-dark));
color: rgb(var(--color-text-bright));
.el-date-picker__header-label {
color: rgb(var(--color-text));
}
.el-picker-panel__icon-btn,
.el-date-table th {
color: rgb(var(--color-text-light));
}
.el-date-table {
td.current:not(.disabled) span {
background-color: rgb(var(--color-blue-700));
}
th {
border-bottom: 1px solid #60656c;
padding: 1px;
}
td.next-month,
td.prev-month {
color: #76777a;
}
tbody tr:nth-of-type(2) td {
padding-top: 10px;
}
}
.popper__arrow::after {
border-bottom-color: rgb(var(--color-foreground-grey-dark))!important;
border-top-color: rgb(var(--color-foreground-grey-dark))!important;
}
}
/* hoh styling */ /* no-mobile-start */
#hohSettings {
.hohCategories {
display: flex;
flex-wrap: wrap;
position: relative;
text-align: center;
margin: 0;
padding: 0;
box-shadow: none;
background-color: rgb(var(--color-background));
border-radius: 3px;
.hohCategory {
border: none;
line-height: inherit;
font-size: 1.2rem;
font-weight: 400;
white-space: nowrap;
flex-grow: 1;
margin: 0;
padding: 6px 10px;
color: rgb(var(--color-text-lighter));
border-radius: 3px;
&:hover {
background-color: inherit;
color: rgb(var(--color-blue));
}
&.active,
&:active,
&:focus {
font-weight: 500;
background-color: rgb(var(--color-foreground-blue));
color: rgb(var(--color-text));
border-radius: 0;
&:hover {
background-color: rgb(var(--color-foreground-blue));
}
}
&:active:first-of-type,
&:first-of-type.active,
&:focus:first-of-type {
border-radius: 3px 0 0 3px;
}
&:active:last-of-type,
&:last-of-type.active,
&:focus:last-of-type {
border-radius: 0 3px 3px 0;
}
}
}
.hohDisplayBox {
border-color: rgb(14, 18, 22);
border-radius: 5px;
}
.scrollableContent {
padding: 30px;
padding-top: 35px;
padding-left: 15px;
}
.hohDisplayBoxTitle {
top: 25px;
left: 35px;
font-weight: bold;
font-size: 1.7em;
}
.hohResizePearl {
right: 10px;
bottom: 10px
}
.hohDisplayBoxClose {
padding: 4px;
border-radius: 20px;
border-width: 2px;
border-color: #900;
width: 30px;
height: 30px;
text-align: center;
vertical-align: bottom;
font-weight: bold;
}
input,
select {
height: 40px;
border-radius: 4px;
color: rgb(var(--color-text));
outline: 0;
transition: .2s;
border: 0;
background: rgb(var(--color-background));
box-shadow: none;
padding-right: 10px;
padding-left: 15px;
}
textarea {
border-radius: 4px;
color: rgb(var(--color-text));
outline: 0;
transition: .2s;
border: 0;
background: rgb(var(--color-background));
box-shadow: none;
padding: 10px;
width: 100%;
height: 200px;
}
}
.hohNativeInput {
height: 40px;
border-radius: 4px;
color: rgb(var(--color-text));
outline: 0;
transition: .2s;
border: 0;
background: rgb(var(--color-background));
box-shadow: none;
padding-right: 10px;
padding-left: 15px;
}
// Hoh "Add progress bars to the list previews"
.info.hasMeter {
position: absolute!important;
width: 100%;
left: 0!important;
bottom: 0!important;
padding: 12px;
meter {
border-radius: 4px;
width: 100%;
height: 5px;
&::-moz-meter-bar {
border-radius: 4px;
}
}
}
// Hoh styling "Colour code the right border of activities by media status"
.activity-entry {
border-radius: 4px;
margin-right: 0!important;
}
/* no-mobile-end */
/* Like heart */
.action.likes .button, .like-wrap.thread_comment .button {
color: rgb(var(--color-blue-dim));
&:hover {
color: rgb(var(--color-blue));
}
.fa-heart {
color: #0000;
stroke: rgb(var(--color-blue-dim));
stroke-width: 70;
stroke-alignment: inner;
font-size: 0.870em;
padding-bottom: 0.08em;
padding-top: 0.05em;
&:hover {
stroke: rgb(var(--color-blue));
}
}
&.liked {
color: rgb(var(--color-red));
&:hover {
color: rgb(var(--color-blue-dim));
.fa-heart {
color: rgb(var(--color-blue-dim));
}
}
.fa-heart {
color: var(--color-red);
stroke: rgba(0, 0, 0, 0);
stroke-width: 0;
font-size: 0.875em;
padding-bottom: 0;
padding-top: 0;
&:hover {
color: rgb(var(--color-blue-dim));
}
}
}
}
/* Scrollbar */
* {
scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, .2);
scrollbar-width: thin;
}
::-webkit-scrollbar {
width: 4px;
height: 8px;
}
::-webkit-scrollbar-button {
display: none;
}
::-webkit-scrollbar-track {
background-color: #1110;
width: 0px;
}
::-webkit-scrollbar-track-piece {
display: none;
}
::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-blue));
}
.markdown {
overflow-y: scroll!important;
scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
&:hover {
scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, 0);
}
&::-webkit-scrollbar-thumb,
.about .content-wrap::-webkit-scrollbar-thumb {
background-color: rgba(0, 0, 0, 0);
}
&:hover::-webkit-scrollbar-thumb,
.about .content-wrap:hover::-webkit-scrollbar-thumb {
background-color: rgb(var(--color-blue));
}
}
::-webkit-scrollbar-corner {
display: none;
}
::-webkit-resizer {
display: none;
}
.about .content-wrap {
overflow-y: scroll!important;
scrollbar-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0);
.markdown {
overflow: hidden!important;
}
&:hover {
overflow-y: scroll!important;
scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, 0);
}
}
.list-editor .custom-lists {
overflow-y: auto;
&:hover {
margin-right: 0;
}
}
/* Forum */
.comment-wrap {
border-left: 7px solid rgba(var(--color-foreground-blue));
.child.odd {
border-left: 7px solid rgba(var(--color-foreground-grey-dark));
}
}
/* ------ Database Tools ------ */
/* Enable edit button on mobile */
@media screen and (max-width: 760px) {
.media.media-page-unscoped .sidebar {
display: grid;
gap: 20px;
.review.button.edit {
grid-row: 1;
display: flex;
span::after {
content: ' Database Entry'
}
}
}
}
.media.container {
@media screen and (max-width: 800px) {
grid-template-columns: auto;
gap: 20px;
min-width: 250px;
/* Popup modal */
.el-dialog__wrapper.dialog .el-dialog {
width: 98%;
}
/* Navigation tabs */
.pages {
grid-column: 1;
grid-row: 1;
}
> div:last-of-type {
grid-column: 1;
grid-row: 2;
}
}
/* General form inputs */
.submission-form {
.col-2 {
gap: 0 10px;
grid-template-columns: repeat( auto-fit, minmax(200px, 1fr));
}
.col-3 {
gap: 0 10px;
grid-template-columns: repeat( auto-fit, minmax(180px, 1fr));
}
&.select-group {
.col-3 {
gap: 10px;
grid-template-columns: repeat( auto-fit, minmax(180px, 250px));
}
}
}
/* Character page */
.character-row {
grid-template-columns: 1fr 1.3fr .1fr;
@media screen and (min-width: 1000px) {
grid-template-columns: .6fr 1.3fr .1fr;
}
@media screen and (max-width: 450px) {
grid-template-columns: auto auto 40px;
grid-template-rows: auto;
gap: 10px;
.character.col {
grid-row: 1;
}
.actor.col {
grid-row: 2;
}
.actions {
grid-column: 3;
grid-row: 1 / span 2;
}
}
}
/* Images */
.images .submission-form {
@media screen and (min-width: 550px) {
&:first-of-type {
display: grid;
grid-template-columns: min-content;
.el-input {
grid-column: 2;
grid-row: 1;
}
.cover {
margin-right: 15px;
grid-column: 1;
grid-row: 1;
}
}
}
.cover.banner {
width: 100%;
}
}
}
/* no-mobile-start */
}
@-moz-document domain("submission-manual.anilist.co") {
/* Colors */
:root {
--color-background: 14, 18, 22;
--color-blue: 120, 180, 255;
--color-shadow-blue: 0, 0, 0;
--color-foreground: 20, 25, 31;
--color-foreground-alt: 18, 23, 29;
--color-foreground-blue: 26, 33, 45;
--color-foreground-grey: 15, 22, 28;
--color-foreground-grey-dark: 6, 12, 13;
--color-text: 240, 240, 240;
--color-text-light: 220, 230, 240;
--color-text-lighter: 230, 230, 240;
--color-text-bright: 255, 255, 255;
scrollbar-color: rgb(var(--color-blue)) rgb(var(--color-background));
scrollbar-width: auto;
}
/* Base */
#nav {
background: rgb(var(--color-foreground));
}
body {
background-color: rgb(var(--color-background));
color: rgb(var(--color-text-lighter));
}
a,
p a code {
color: rgb(var(--color-blue));
}
blockquote {
color: rgb(var(--color-text-light));
}
/* Top navbar */
.navbar {
background-color: rgb(var(--color-foreground));
border-bottom: none;
.site-name {
color: rgb(var(--color-text-light));
}
.links {
background-color: rgb(var(--color-foreground));
}
.search-box input {
background-color: rgb(var(--color-background));
color: rgb(var(--color-text-light));
border-color: rgb(var(--color-background));
border-width: 2px;
}
}
/* Sidebar */
.sidebar {
background-color: rgb(var(--color-foreground-alt));
color: rgb(var(--color-text-light));
a.sidebar-link {
color: rgb(var(--color-text-lighter));
}
a.sidebar-link.active {
color: rgb(var(--color-blue));
}
}
/* Warning / Tip / Danger boxes */
.custom-block {
&.warning {
color: rgb(var(--color-text-light));
}
&.warning a {
color: rgb(var(--color-blue));
}
&.warning .custom-block-title,
&.danger .custom-block-title {
color: rgb(var(--color-text-bright));
}
&.tip {
background-color: #113927;
}
&.danger {
background-color: #321010;
color: #ffe2e2;
}
}
/* Tables */
td,
th {
border-color: #888;
}
tr:nth-child(2n) {
background-color: rgb(var(--color-foreground-grey));
}
.icon.outbound {
color: rgb(var(--color-text));
}
/* Tab components */
.tabs-component-panels {
background-color: rgb(var(--color-foreground-blue));
border-color: rgb(var(--color-foreground));
}
.tabs-component-tab {
background-color: rgb(var(--color-foreground-alt));
border-color: #0000;
color: #ccc;
&:focus-visible,
&:focus,
& a:focus-visible,
& a:focus {
outline: none;
}
&.is-active {
background-color: rgb(var(--color-foreground-blue));
color: #fff;
transform: none;
&:hover a {
cursor: default;
text-decoration: none;
}
}
&:hover:not(.is-active) {
color: white;
a {
text-decoration: none;
}
}
}
} /* no-mobile-end */