[CSS - Modern] 🛠️ Tweaks for lists -- Horizontal tags, descriptions, category-coloured text, accent colour, and more.

/*==============================*\
| Category-Coloured  Header Bars |
\* --- - --- - ---- - --- - --- */

.status-menu-container .status-menu .status-button:nth-of-type(1)::after {
	/* All Anime */
	background: YOURCOLOUR ;
} .status-menu-container .status-menu .status-button:nth-of-type(2)::after {
	/* Watching */
	background: #2db039 ;
} .status-menu-container .status-menu .status-button:nth-of-type(3)::after {
	/* Completed */
	background: #26448f ;
} .status-menu-container .status-menu .status-button:nth-of-type(4)::after {
	/* On Hold */
	background: #f1c83e ;
} .status-menu-container .status-menu .status-button:nth-of-type(5)::after {
	/* Droppped */
	background: #a12f31 ;
} .status-menu-container .status-menu .status-button:nth-of-type(6)::after {
	/* Planned */
	background: #c3c3c3 ;
}

/*==============================*\
| Category-Coloured  Header Text |
\* --- - --- - ---- - --- - --- */

.status-menu-container .status-menu .status-button:nth-of-type(1) {
	/* All Anime */
	color: YOURCOLOUR ;
} .status-menu-container .status-menu .status-button:nth-of-type(2) {
	/* Watching */
	color: #2db039 ;
} .status-menu-container .status-menu .status-button:nth-of-type(3) {
	/* Completed */
	color: #26448f ;
} .status-menu-container .status-menu .status-button:nth-of-type(4) {
	/* On Hold */
	color: #f1c83e ;
} .status-menu-container .status-menu .status-button:nth-of-type(5) {
	/* Droppped */
	color: #a12f31 ;
} .status-menu-container .status-menu .status-button:nth-of-type(6) {
	/* Planned */
	color: #c3c3c3 ;
}

/*==============================*\
|      Rainbow All Anime Bar     |
\* --- - --- - ---- - --- - --- */

.status-menu-container .status-menu .status-button:nth-of-type(1)::after {
	animation: category-rainbow-bar 10s infinite ease;
}

@keyframes category-rainbow-bar {
	0%, 100% {
		background: #2db039 ;
	}
	20% {
		background: #26448f ;
	}
	40% {
		background: #f1c83e ;
	}
	60% {
		background: #a12f31 ;
	}
	80% {		
		background: #c3c3c3 ;
	}
}

/*==============================*\
|     Rainbow All  Anime Text     |
\* --- - --- - ---- - --- - --- */

.status-menu-container .status-menu .status-button:nth-of-type(1) {
	animation: category-rainbow-text 10s infinite ease;
}

@keyframes category-rainbow-text {
	0%, 100% {
		color: #2db039 ;
	}
	20% {
		color: #26448f ;
	}
	40% {
		color: #f1c83e ;
	}
	60% {
		color: #a12f31 ;
	}
	80% {		
		color: #c3c3c3 ;
	}
}

/*==============================*\
|    Category-Coloured Titles    |
\* --- - --- - ---- - --- - --- */

.data.title .link:hover {
	text-decoration: underline;
}

.list-item .data.watching ~ .title .link,
.list-item .data.reading ~ .title .link {
	/* Watching */
	color: #2db039 !important;
}

.list-item .data.completed ~ .title .link {
	/* Completed */
	color: #26448f !important;
}

.list-item .data.onhold ~ .title .link {
	/* On Hold */
	color: #f1c83e !important;
}

.list-item .data.dropped ~ .title .link {
	/* Dropped */
	color: #a12f31 !important;
}

.list-item .data.plantowatch ~ .title .link,
.list-item .data.plantoread ~ .title .link {
	/* Planned */
	color: #c3c3c3 !important;
}

/*==============================*\
|  Category-Coloured  List Text  |
\* --- - --- - ---- - --- - --- */

.data a:not(.edit-disabled):hover {
	text-decoration: underline;
}

.list-item .data.watching ~ .data a:not(.edit),
.list-item .data.reading ~ .data a:not(.edit) {
	/* Watching */
	color: #2db039 !important;
}

.list-item .data.completed ~ .data a:not(.edit) {
	/* Completed */
	color: #26448f !important;
}

.list-item .data.onhold ~ .data a:not(.edit) {
	/* On Hold */
	color: #f1c83e !important;
}

.list-item .data.dropped ~ .data a:not(.edit) {
	/* Dropped */
	color: #a12f31 !important;
}

.list-item .data.plantowatch ~ .data a:not(.edit),
.list-item .data.plantoread ~ .data a:not(.edit) {
	/* Planned */
	color: #c3c3c3 !important;
}

.data.tags a[href*="=Fav%202018"]::after {
	content: "Favourite of 2018"
}

.data.tags a[href*="=Fav"]::after {
	content: "All-time Favourite"
}

.data.tags a[href*="=Fav"]::after {
	content: "All-time Favourite"
}

.data.tags a[href*="=Fav%202018"]::after {
	content: "Favourite of 2018"
}

.data.tags a[href$="=TAGNAME"]::after,
.data.tags a[href*="=TAGNAME&"]::after {
	content: "TAGDESC"
}

.data.tags a[href$="=Comedy"]::after,
.data.tags a[href*="=Comedy&"]::after {
	content: "Humour-focused anime."
}

/*==============================*\
|       Score  Descriptors       |
\* --- - --- - ---- - --- - --- */

.score-na::before {
	content: "Haven't decided";
}

.score-1::before {
	content: "Unredeemable";
}

.score-2::before {
	content: "Horrid";
}

.score-3::before {
	content: "Awful";
}

.score-4::before {
	content: "Bad";
}

.score-5::before {
	content: "Mediocre";
}

.score-6::before {
	content: "Alright";
}

.score-7::before {
	content: "Good";
}

.score-8::before {
	content: "Great";
}

.score-9::before {
	content: "Fantastic";
}

.score-10::before {
	content: "Incredible";
}

/* Internals */

.score-label {
	position: relative;
	display: inline-block;
	z-index: 0;
	transition: color 0.2s ease;
}

.score-label:hover {
	color: #fff !important;
}

.score-label::before {
	position: absolute;
	top: -4px;
	left: -8px;
	z-index: -1;
	display: block;
	padding: 4px 8px 4px calc(100% + 12px);
	background: #111;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.2s ease;
	white-space: pre;
	text-align: left;
	pointer-events: none;
}

.score-label:hover::before {
	opacity: 1;
}

/*==============================*\
|       Score  Descriptors       |
\* --- - --- - ---- - --- - --- */

.score-na::before {
	content: "Haven't decided";
}

.score-1::before {
	content: "Unredeemable";
}

.score-2::before {
	content: "Horrid";
}

.score-3::before {
	content: "Awful";
}

.score-4::before {
	content: "Bad";
}

.score-5::before {
	content: "Mediocre";
}

.score-6::before {
	content: "Alright";
}

.score-7::before {
	content: "Good";
}

.score-8::before {
	content: "Great";
}

.score-9::before {
	content: "Fantastic";
}

.score-10::before {
	content: "Incredible";
}

/* Internals */

.score-label {
	position: relative;
	display: inline-block;
	z-index: 0;
	transition: color 0.2s ease;
}

.score-label:hover {
	color: #fff !important;
}

.score-label::before {
	position: absolute;
	top: -4px;
	left: -8px;
	z-index: -1;
	width: 400px;
	display: block;
	padding: 4px 8px 4px calc(100% + 12px);
	background: #111;
	border-radius: 4px;
	opacity: 0;
	transition: opacity 0.2s ease;
	white-space: pre-wrap;
	text-align: left;
	pointer-events: none;
}

.score-label:hover::before {
	opacity: 1;
}

/*==============================*\
|        Horizontal Tags         |
\* --- - --- - ---- - --- - --- */

/* remove header cell - we can't use "display: none" because it must still exist in the page flow */
.header-title.tags {
	width: 0 !important;
	padding: 0 !important;
	font-size: 0;
}

/* make the list row an "anchor point" for the tags */
.list-table-data {
	position: relative;
}

/* add a bit of spacing to each row */
.list-table .list-table-data .data {
	padding-bottom: 24px;
}

/* move tags */
.list-table .list-table-data .data.tags {
	position: absolute;
	inset: auto 0 4px 6px;
	padding: 0 8px;
	border: none;
}

/* make tags horizontal */
.data.tags div {
	float: left;
}

.data.tags .edit {
	float: right;
	width: auto !important;
}

.list-table .list-table-data .data.tags textarea {
	height: 20px;
}

/*==============================*\
|        Horizontal Tags         |
\* --- - --- - ---- - --- - --- */

/* remove header cell - we can't use "display: none" because it must still exist in the page flow */
.header-title.tags {
	width: 0 !important;
	padding: 0 !important;
	font-size: 0;
}

/* add a bit of spacing to each row */
.list-table .list-table-data .data {
	padding-top: 24px;
}

/* move tags */
.list-table .list-table-data .data.tags {
	position: absolute;
	left: 23px;
	box-sizing: border-box;
	width: calc(100% - 40px);
	padding: 0 8px;
	height: auto;
	border: none;
}

/* make tags horizontal */
.data.tags div {
	float: left;
}

.data.tags .edit {
	width: auto !important;
	float: right;
}

.list-table .list-table-data .data.tags textarea {
	height: 20px;
}

/* Hide Commas - for use with Horizontal Tags */

.data.tags span {
	margin-right: 8px;
	/* hide commas by resetting font-size */
	font-size: 0;
	line-height: 0;
}
.data.tags a {
	/* show links by setting a new font-size
	change font-size here if it's too big or small */
	font-size: 11px;
	line-height: 20px;
}