Skip to content

Instantly share code, notes, and snippets.

@excd
Last active August 16, 2023 10:01
Show Gist options
  • Save excd/69e4ed97e3da7ee060f10e6ffd41c20f to your computer and use it in GitHub Desktop.
Save excd/69e4ed97e3da7ee060f10e6ffd41c20f to your computer and use it in GitHub Desktop.
CSS style for custom modern MyAnimeList theme. View here: https://myanimelist.net/animelist/_excd
/**
* 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);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment