CSS style for custom modern MyAnimeList theme. View here: https://myanimelist.net/animelist/_excd

excd-myanimelist-modern.css

/**
 * MyAnimeList custom modern list style by excd.
 * https://myanimelist.net/animelist/_excd
**/

/* Variables */
:root {
  --background-color: #2a2d33;
  --background-color-light: #353941;
  --background-color-dark: #202327;
  --accent-color: #4b75d8;
  --accent-color-light: #77abff;
  --accent-color-dark: #3263b3;
  --text-color: #ececec;
  --text-color-dim: #dbdbdb;
  --text-color-dark: #bcbcbc;
}

/* Page body */
::-webkit-scrollbar {
  display: none; /* Hide scrollbar on Chrome, Safari, and Opera */
}
html,
html.dark-mode {
  height: 100%;
  -ms-overflow-style: none; /* Hide scrollbar on IE and Edge */
  scrollbar-width: none; /* Hide scrollbar on Firefox */
}
body.ownlist:not(.classic-ownlist).anime,
html.dark-mode body.ownlist:not(.classic-ownlist).anime,
body.ownlist:not(.classic-ownlist).manga,
html.dark-mode body.ownlist:not(.classic-ownlist).manga {
  display: table;
  height: 100%;
  width: 100%;
  background-color: var(--background-color-dark);
  color: var(--text-color);
}
a {
  color: var(--accent-color-light);
}

/* Footer */
footer {
  height: 1px;
  display: table-footer-group;
}
footer > div#footer-block {
  background-color: var(--accent-color-dark);
}
footer > div#footer-block > div {
  color: var(--text-color);
}

/* Advanced options menu */
div#advanced-options {
  background-color: var(--background-color-dark);
  color: var(--text-color);
  border: none;
  box-shadow: 0.1rem 0.1rem 0.5rem black;
}

/* Main list container */
div#list-container.list-container {
  margin-bottom: 2rem;
  background-color: var(--background-color-dark);
  border-radius: 0.5em;
  border: none;
  box-shadow: 0.1rem 0.1rem 0.5rem black;
}

/* List status menu container */
div#status-menu.status-menu-container {
  background-color: var(--background-color);
  border-radius: inherit;
  border: none;
}
div#status-menu.status-menu-container > div.status-menu > a.status-button,
div#status-menu.status-menu-container
  > div.status-menu
  > div.search-container
  a#search-button {
  color: var(--text-color);
}
div#status-menu.status-menu-container
  > div.status-menu
  > a.status-button::after {
  background-color: var(--accent-color-dark);
}

/* List status title box */
div.list-block {
  margin: 0;
  min-height: 0;
}
div.list-unit,
div.list-unit > div.list-status-title,
div.list-unit > div.list-stats {
  width: 100%;
}
div.list-unit > div.list-status-title {
  background-color: var(--accent-color);
}
div.list-unit > div.list-stats {
  background-color: var(--accent-color-dark);
}
div.list-unit > div.loading-space {
  height: 1px;
}

/* List table */
table.list-table,
table.list-table > tbody > tr.list-table-header,
table.list-table > tbody > tr.list-table-header > th.header-title,
table.list-table > tbody.list-item > tr.list-table-data > td {
  border: none;
}
table.list-table > tbody > tr.list-table-header > th.header-title {
  background: var(--background-color-dark);
}
table.list-table > tbody > tr.list-table-header > th.header-title > a.link,
table.list-table
  > tbody
  > tr.list-table-header
  > th.header-title
  > a.link.sort {
  color: var(--text-color);
}
table.list-table
  > tbody
  > tr.list-table-header
  > th.header-title
  > a.link.sort:hover {
  color: var(--text-color-dark);
}
table.list-table > tbody.list-item:nth-of-type(2n) {
  background-color: var(--background-color);
}
table.list-table > tbody.list-item:nth-of-type(2n + 1) {
  background-color: var(--background-color-light);
}
table.list-table > tbody.list-item > tr.list-table-data a.edit-disabled {
  color: var(--text-color);
}
table.list-table > tbody.list-item > tr.more-info {
  border: none;
}
table.list-table
  > tbody.list-item
  > tr.list-table-data
  > td.data.title
  > span.content-status {
  color: var(--text-color-dim);
}

/* Side panel */
div.list-menu-float {
  border: none;
}
div.list-menu-float .icon-menu {
  background-color: var(--background-color);
}
div.list-menu-float .icon-menu:not(.profile):hover,
div.list-menu-float .icon-menu.setting:hover > .text > a.link-list-setting,
div.list-menu-float .icon-menu.setting:hover > .text > a.link-style-setting {
  background-color: var(--accent-color-dark);
}
div.list-menu-float .icon-menu > svg.icon {
  fill: var(--text-color-dim);
}
div.list-menu-float .icon-menu:hover > svg.icon {
  fill: var(--text-color);
}