AniList Redesigned. Fixes inconsistencies, adds borders, changes layouts, etc. for a much cleaner AniList!
Let me know of any fixes/changes to look at.
AniList Redesigned by reitenth
Details
Authorreitenth
LicenseNo License
CategoryAnilist
Created
Updated
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Best to use with Automail - https://greasyfork.org/en/scripts/370473-aniscripts.
Used navbar from - https://userstyles.world/style/5243/anilist-modifications.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name AniList Redesigned
@version 1.0
@description Revamped Anilist! Best to use with Automail - https://greasyfork.org/en/scripts/370473-aniscripts. Used vertical nav from - https://userstyles.world/style/5243/anilist-modifications.
@author reitenth
@preprocessor stylus
@namespace reitenth
==/UserStyle== */
@-moz-document regexp(".*anilist.co.*") {
// every page
// theme
rgb=()
rgba=()
.site-theme-dark {
--color-background: 39, 44, 56;
--color-foreground: 31, 35, 45;
--color-foreground-grey: 25, 29, 38;
--color-foreground-grey-dark: 16, 20, 25;
--color-foreground-blue: 25, 29, 38;
--color-foreground-blue-dark: 19, 23, 29;
--color-background-blue-dark: 31, 35, 45;
--color-overlay: 31, 38, 49;
--color-shadow: 49, 54, 68;
--color-shadow-dark: 6, 13, 34;
--color-shadow-blue: 103, 132, 187;
--color-text: 159, 173, 189;
--color-text-light: 129, 140, 153;
--color-text-lighter: 133, 150, 165;
--color-text-bright: 237, 241, 245;
--color-background-100: 31, 35, 45;
--color-background-200: 39, 44, 56;
}
.link[data-v-4fbac4e1]:hover,
.search[data-v-4fbac4e1] svg:hover,
.user .chevron[data-v-4fbac4e1]:hover {
color: rgb(61, 180, 242)
}
.media-card[data-v-3429f686],
.cover[data-v-3b24ed8f],
.select[data-v-063abb0a],
.dropdown[data-v-a762532e],
.dropdown[data-v-38edf8f8],
.search-wrap[data-v-2a18451e],
.open-btn[data-v-a762532e],
.hover-data[data-v-3b24ed8f],
.options[data-v-063abb0a],
.dropdown[data-v-0bb70ffa]{
box-shadow: none
}
.search[data-v-4fbac4e1] svg {
color: var(--color-text)
}
.site-theme-dark .nav-unscoped.transparent {
background: rgba(31, 38, 49, .5);
color: rgb(var(--color-text));
}
.site-theme-dark .nav-unscoped,
.site-theme-dark .nav-unscoped.transparent:hover {
background: rgb(var(--color-foreground));
}
* {
scrollbar-color: rgb(var(--color-blue)) rgba(0, 0, 0, 0);
scrollbar-width: auto;
}
// remove footer
.footer {
display: none
}
.nav-wrap[data-v-1cc2919e] {
border: 1px solid;
border-color: #3e3e3e;
}
// vertical navbar
#app {
margin-top: 0;
margin-left: 60px!important;
border: 1px solid;
border-color: #3e3e3e;
}
.nav .user {
position: fixed;
display: grid;
grid-gap: 40px;
top: 0px;
width: 60px;
grid-template-rows: 55px 30px;
}
.nav .search {
top: 60px;
width: 60px;
margin: 0;
text-align: center;
position: fixed;
}
.user-wrap {
padding: 0 11px 0 11px!important;
}
#nav > div.wrap > div.user > a {
margin-left: 10px;
}
#nav {
background: rgb(var(--color-background));
width: 60px;
height: 100%;
position: fixed!important;
top: 0!important;
bottom: 0!important;
}
.nav .wrap .links {
font-size: 1.05rem;
flex-direction: column;
}
.nav .wrap .links .link {
margin-bottom: 10px;
padding: 5px 0px;
text-align: center;
text-transform: lowercase;
}
.nav .wrap .links .link:before {
display: block;
content: '';
height: 24px;
width: 60px;
background-size: 24px;
margin-left: 0;
margin-bottom: 5px;
background-repeat: no-repeat;
background-position: center;
}
.nav .link[href="/home"]::before {
background: url("https://puu.sh/AvnoD/65ab2968a6.png");
}
.nav .link[href*="/user/"]::before {
background: url("https://puu.sh/AvnlD/7a305ea3c6.png");
}
.nav .link[href*="/animelist"]::before {
background: url("https://puu.sh/AvnpD/74ec4b003b.png");
}
.nav .link[href*="/mangalist"]::before {
background: url("https://puu.sh/AvnpD/74ec4b003b.png");
}
.nav .link[href="/search/anime"]::before {
background: url("https://puu.sh/AvnqX/a04ce29b43.png");
}
#nav > div.wrap > div.links > span > a {
display: inline-block;
}
.nav .link[href="/social"]::before {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96" height="96" viewBox="0 0 24 24"><path d="M5 3h14a2 2 0 0 1 2 2v14a2 2 0 0 1 -2 2h-14a2 2 0 0 1 -2 -2v-14a2 2 0 0 1 2 -2zM12 6a3 3 0 0 0 0 6a3 3 0 0 0 0 -6zM6 18h12v-1a6 3 0 0 0 -12 0z" fill="rgb(204,204,204)"/></svg>');
}
.nav .link[href*="/forum"]::before {
background: url("https://puu.sh/Avnqt/1fc2afcc8c.png");
}
.nav .link[href="/login"]::before {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96" height="96" viewBox="0 0 24 24"><path d="m12 3l-10 9h3v8h5v-6h4v6h5v-8h3z" fill="rgb(204,204,204)"/></svg>');
}
.login {
margin-left: 0!important;
}
.nav .link[href="/signup"]::before {
background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="96" height="96" viewBox="0 0 24 24"><g fill="rgb(204,204,204)"><circle cx="15" cy="8" r="3"/><path d="M9 18h12v-1a6 3 0 0 0 -12 0z"/><text x="4" y="14" font-weight="bold" font-size="70%">+</text></g></svg>');
filter: brightness(2)!important;
}
.signup {
margin-left: -70px;
border-radius: 0!important;
color: white!important;
}
.nav .logo {
position: absolute;
bottom: 0;
width: 60px;
}
.user .chevron {
display: none;
}
// user dropdown
#nav > div.wrap > div.user > div > div.dropdown {
left: 60px;
top: 0;
}
#nav > div.wrap > div.user > div > div.dropdown:before {
display: none;
}
/* browse dropdown */
#nav > div.wrap > div.links > span > div {
left: 60px;
top: 0;
}
.browse-wrap .dropdown:before {
display: none;
}
.dropdown[data-v-38edf8f8] {
box-shadow: 0 14px 30px rgba(var(--color-shadow-blue), .25), 0 4px 4px rgba(var(--color-shadow-blue), .15);
}
.footer[data-v-04b245e6] {
background: rgb(var(--color-background-100));
}
.footer[data-v-38edf8f8] {
background: rgb(var(--color-background-100));
}
.nav .wrap .links .link {
margin-bottom: 10px;
padding: 5px 0px;
text-align: center;
text-transform: lowercase;
}
}
@-moz-document regexp(".*anilist.co/(anime|manga).*") {
// anime/manga page
// description box
.header[data-v-5776f768] {
background: rgb(var(--color-background));
}
.content[data-v-5776f768] {
padding-left: 10px;
padding-right: 10px;
border: 1px solid;
border-color: #3e3e3e;
background: rgb(var(--color-foreground));
text-align: center
}
.container {
margin-top: 50px;
}
.nav[data-v-5776f768] {
border: solid;
border-color: #3e3e3e;
border-width: 1px 0 0 0;
}
.nav .link[data-v-5776f768] {
padding-top: 5px
}
.description[data-v-5776f768] {
max-width: 2000px;
}
// remove banner
.banner {
display: none;
}
// poster box
.cover-wrap.overlap-banner[data-v-5776f768] {
margin-top: 0px;
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
.actions[data-v-5776f768] {
margin-left: 20px;
margin-right: 20px;
margin-top: 0px;
width: 80%
}
.cover[data-v-5776f768] {
margin: 20px;
width: 80%;
vertical-align: middle;
}
// relations
.relations.small > div {
margin-left: 0px;
}
.relations.hohRelationStatusDots > h2 {
margin-bottom: 6px;
}
.relations.hohRelationStatusDots > div.grid-wrap {
padding-left: 0px;
}
.small[data-v-6dc78144] {
width: 60px
}
.small .cover .image-text[data-v-6dc78144] {
background: rgba(var(--color-overlay), 0.7);
font-size: 1rem;
}
.media .relations .cover[href^="/manga/"] {
border-bottom-style: none;
}
.media .relations .cover[href^="/anime/"] {
border-bottom-style: none;
}
.media-preview-card[data-v-6dc78144] {
height: 81px;
grid-template-columns: 60px auto;
border: 1px solid;
border-color: #3e3e3e;
}
.title[data-v-6dc78144] {
white-space: nowrap;
overflow: hidden;
}
.info-header[data-v-6dc78144] {
margin-bottom: 5px;
font-weight: normal;
}
.hohStatusDot {
display: none;
}
// content box
.content[data-v-c93e1c70] {
grid-column-gap: 30px;
margin-top: 30px
}
a.cover {
margin: 7px;
}
// characters/staff box
.role-card[data-v-f92815d6] {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
// info box
.data[data-v-d3a518a6] {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
.data-set {
border: solid;
border-color: #3e3e3e;
border-width: 0 0 1px 0;
}
.rankings {
display: none;
}
.external-links[data-v-c1b7ee7c] {
display: none;
}
.tag[data-v-c403a904] {
border: 1px solid;
border-color: #3e3e3e;
}
// status/score distrubtion
.overview[data-v-cdf07c88] .content-wrap {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
.media-score-distribution {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
.episodes {
display: none;
}
// trailer/folllowing
.follow[data-v-69b91520] {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
.trailer {
overflow: auto;
resize: none;
}
.video[data-v-cc58dc40] {
border: 1px solid;
border-color: #3e3e3e;
}
.trailer .video {
height: calc(98% - 30px);
padding: 7px;
background: rgb(var(--color-foreground));
}
// threads/reviews
.thread-card[data-v-550f7194] {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
.content[data-v-24561a98] {
background: rgb(var(--color-foreground));
border: 1px solid;
border-color: #3e3e3e;
}
a.user {
border: 1px solid;
border-color: #3e3e3e;
}
// reccomendations
.recommendation-card {
border: 1px solid;
border-color: #3e3e3e;
background: rgb(var(--color-foreground));
}
.cover[data-v-38341878] {
width: 116px;
margin: 7px;
border: 1px solid;
border-color: #3e3e3e;
}
.title[data-v-38341878] {
text-align: center;
...