/* ==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.9.0
@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;
--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;
}
.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;
}
}
.dropdown::before {
border-bottom-color: rgb(var(--color-background-100));
}
}
}
.nav[data-v-e2f25004] {
background: #181a32;
}
.banner-image[data-v-e2f25004] {
filter: grayscale(50%);
}
/* Mobile and small screens adjustments */
.page-content > .container,
.page-content > .user > .container {
@media screen and (max-width: 760px) {
padding-left: 2px;
padding-right: 2px;
}
}
/* Increase font size */
@media screen and (max-width: 760px) {
html {
font-size: 11px;
}
}
/* Enable edit button on mobile */
@media screen and (max-width: 760px) {
.media.media-page-unscoped .sidebar {
display: grid;
gap: 20px;
margin-bottom: 20px;
> * {
grid-column: span 2;
}
.review.button {
grid-row: 1;
grid-column: 2;
width: 100%;
height: 40px;
margin: 0;
display: flex;
&.edit {
grid-column: 1;
span::after {
content: ' Database Entry';
}
}
}
.data {
margin-bottom: 0;
}
.rankings {
grid-row: 4;
display: grid;
gap: 10px;
.ranking {
margin-bottom: 0;
&.rated {
grid-column: 1;
}
&.popular {
grid-column: 2;
}
}
}
}
}
@media screen and (max-width: 450px) {
.media.media-page-unscoped .sidebar .rankings .ranking {
&.rated {
grid-column: 1;
grid-row: 1;
}
&.popular {
grid-column: 1;
grid-row: 2;
}
}
}
/* Profile page mobile edits */
@media screen and (max-width: 760px) {
.user.user-page-unscoped {
.overview .section .about {
padding: 10px;
}
}
}
@media screen and (max-width: 1040px) {
.tooltip {
display: none !important;
}
.user.user-page-unscoped {
.overview {
.desktop {
display: grid;
&.favourites.preview .favourites-wrap {
display: grid;
grid-auto-flow: column;
justify-content: unset;
width: unset;
margin: 0;
overflow-x: scroll;
a {
margin: 0;
margin-bottom: 10px;
&:last-of-type {
margin-right: 15px;
}
}
}
&.favourites.preview .favourites-wrap.studios {
display: flex;
flex-wrap: nowrap;
a {
flex-grow: 1;
flex-shrink: 0;
margin-bottom: 6px;
}
}
}
}
.overview > .section:nth-of-type(2) {
.stats-wrap {
display: none;
}
}
}
}
/* 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 arrows */
.el-dropdown-menu.el-popper,
.el-select-dropdown.el-popper {
&[x-placement^='top'] .popper__arrow::after {
bottom: 0;
}
&[x-placement^='bottom'] .popper__arrow::after {
top: 0;
}
.popper__arrow,
.popper__arrow::after {
border-top-color: rgb(var(--color-foreground-grey-dark));
border-bottom-color: rgb(var(--color-foreground-grey-dark));
}
}
.el-dropdown-menu.el-popper.activity-extras-dropdown {
&[x-placement^='top'] .popper__arrow::after {
bottom: 0;
}
&[x-placement^='bottom'] {
transform: translateY(25px);
.popper__arrow {
top: -5px;
}
}
}
/* Dropdown menu */
.el-dropdown-menu.el-popper {
text-align: center;
background-color: rgb(var(--color-foreground-grey-dark));
box-shadow: 0 1px 10px 0 rgba(var(--color-shadow-blue));
&.el-dropdown-menu--medium {
width: 150px;
&.activity-extras-dropdown {
text-align: left;
}
.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));
margin: auto;
&::before {
background-color: rgb(var(--color-foreground-grey-dark)) !important;
}
}
}
/* 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 textarea {
box-shadow: none;
// Set the transition speed to 0s so as to not have a scrollbar appear every time you press "enter".
will-change: height;
transition: height 0s;
}
/* 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 */
#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: 0.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: 0.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: 0.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;
}
/* 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.87em;
padding-bottom: 0.08em;
padding-top: 0.05em;
&:hover {
stroke: rgb(var(--color-blue));
}
}
&.liked {
color: rgb(var(--color-red));
&:hover {
--color-red: 246, 124, 144;
color: rgb(var(--color-red));
.fa-heart {
color: rgb(var(--color-red));
}
}
.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-red));
}
}
}
}
/* forum thread, favourite like heart */
.like-wrap.thread .button,
.actions .favourite {
.fa-heart {
color: #0000;
stroke: rgb(var(--color-white));
stroke-width: 70;
}
&.liked,
&.isFavourite {
.fa-heart {
color: rgb(var(--color-white)) !important;
stroke: rgba(0, 0, 0, 0) !important;
}
}
}
/* Scrollbar */
* {
scrollbar-color: rgb(var(--color-blue)) rgba(0, 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));
}
.activity-markdown .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);
}
}
// Add spacing at the bottom of bios as some of them almost cut off currently
.about .content-wrap .markdown::after {
content: '';
display: block;
height: 10px;
width: 10px;
}
.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));
}
}
/* Staff/character page header */
.character-wrap .header,
.staff-wrap .header {
background: rgb(var(--color-foreground));
.name {
color: rgb(var(--color-gray-900));
}
.name-alt {
color: rgb(var(--color-gray-800));
}
.edit {
color: rgb(var(--color-gray-800));
}
}
/* ------ Database Tools ------ */
.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 0.1fr;
@media screen and (min-width: 1000px) {
grid-template-columns: 0.6fr 1.3fr 0.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 */
}
/* no-mobile-end */
