[CSS - Modern] ⭐️ Brink by V.L -- Cover-style theme!

font: 16px/30px "FontAwesome";

font: 16px/30px "FontAwesome 4";

.content-status {
    color: red !important;
}

.rewatching {
    color: green !important;
}

.rereading {
    color: blue !important;
}

/*------------------------------*\
|*          Banner Tag          *|
\* - - - - - - - - - - - - - - -*/

/* Modify how Tags Work */

.data.tags {
	overflow: initial;
	opacity: 1;
	z-index: 10;
}

.data.tags span {
	min-height: initial;
	margin-bottom: 0;
}

.data.tags a {
	min-height: 15px;
	margin-bottom: 4px;
	opacity: 0;
	transition:
		color var(--timeText) var(--bezierFast),
		opacity calc(var(--timeItem) * 1.5) var(--bezierFast);
} .list-item:hover .data.tags a {
	opacity: 1;
}

/* Tag-Specific Changes */

.data.tags a[href$="=YourTag"] {
	position: static;
	opacity: 1;
	color: hsla(var(--text), 0%) !important;
	text-shadow: none;
}

.list-item:hover .data.tags a[href$="=YourTag"] {
	color: hsl(var(--text)) !important;
	text-shadow: -0.6px 0.84px 1.68px #000;
}

.list-item .data.tags a[href$="=YourTag"]:hover {
	color: hsl(var(--textLinkHov)) !important;
}

.data.tags a[href$="=YourTag"]::before {
	content: "";
	position: absolute;
	right: -12px;
	top: -52px;
	z-index: -1;
	
	width: 210px;
	height: 6px;
	border-top: 2px solid hsl(var(--text));
	border-radius: 6px 6px 0 0;
	
	pointer-events: none;
}

.data.tags a[href$="=YourTag"]::after {
	content: "YOUR TAG HERE";
	position: absolute;
	right: 93px;
	top: -60px;
	z-index: -1;
	
	min-width: 100px;
	height: 16px;
	padding: 0 10px;
	border-radius: 3px;
	background: hsl(var(--text));
	
	color: hsl(var(--bg));
	font: bold 13px/13px var(--font);
	text-align: center;
	letter-spacing: 1px;
	text-shadow: none;
	white-space: nowrap;
	
	transform: translateX(50%);
	pointer-events: none;
}

/* Tag-Based Top Rated */

.data.tags div,
.data.tags a {
	position: static;
}

.data a[href*="tag=10"]::before {
	content: "";
	position: absolute;
	left: -12px;
	bottom: 252px;
	z-index: -1;
	
	width: 210px;
	height: 36px;
	border-top: 2px solid hsl(var(--goldRating));
	border-radius: 6px 6px 0 0;
	box-shadow: 0px -6px 5px -5px hsl(var(--goldRating));
	
	pointer-events: none;
}

.data.tags a[href*="tag=10"]::after {
	content: "TOP RATED";
	position: absolute;
	left: 93px;
	bottom: 277px;
	top: auto;
	right: auto;
	z-index: -1;
	
	min-width: 100px;
	height: 16px;
	padding: 0 10px;
	border-radius: 3px;
	background: hsl(var(--goldRating));
	box-shadow: 0px -5px 6px -3px hsl(var(--goldRating));
	
	color: hsl(var(--bg));
	font: bold 13px/13px var(--font);
	text-align: center;
	letter-spacing: 1px;
	text-shadow: none;
	
	transform: translateX(-50%);
	pointer-events: none;
}

/* ========================
Category-coloured Titles on hover */

.watching ~ .title,
.reading ~ .title {
	--category: var(--current);
} .completed ~ .title {
	--category: var(--completed);
} .onhold ~ .title {
	--category: var(--paused);
} .dropped ~ .title {
	--category: var(--dropped);
} .plantowatch ~ .title,
.plantoread ~ .title {
	--category: var(--planned);
}

.list-table .list-table-data .data.title a:not(.edit-disabled):hover {
	color: hsl(var(--category)) !important;
}

/* Category-Colours for List Items */
.watching,
.reading,
.watching ~ .data,
.reading ~ .data {
	--category: var(--current);
	--category-complement: var(--bg);
}
.completed,
.completed ~ .data {
	--category: var(--completed);
	--category-complement: var(--bg);
}
.onhold,
.onhold ~ .data {
	--category: var(--paused);
	--category-complement: var(--bg);
}
.dropped,
.dropped ~ .data {
	--category: var(--dropped);
	--category-complement: var(--bg);
}
.plantowatch,
.plantoread,
.plantowatch ~ .data,
.plantoread ~ .data {
	--category: var(--planned);
	--category-complement: var(--bg);
}

.data:not(.title):not(score):not(.tags):not(.progress):not(.chapter):not(.volume),
.add-edit-more {
	color: hsl(var(--text));
	--text: var(--category); /* changes the colour of all text - delete line to remove */
	--icon: var(--category); /* changes the colour of icons - delete line to remove */
	--textLinkHov: var(--category); /* changes the colour of links on hover - delete line to remove */
}

/* Only the links */
.data:not(.title) a,
.add-edit-more a {
	--text: var(--category); /* changes the colour of links - delete line to remove */
	--textLinkHov: var(--category); /* changes the colour of links on hover - delete line to remove */
}

.data.title .link,
.data.tags,
.data.progress,
.data.chapter,
.data.volume {
	color: hsl(var(--text));
	--text: var(--category-complement); /* changes the colour of all text - delete line to remove */
	--textLinkHov: var(--category-complement); /* changes the colour of links on hover - delete line to remove */
}

/* category button base text colour - remove this section if you don't need this */
#status-menu .status-button::before {
	color: hsla(var(--text),48%);
}

/* Category-coloured Category Buttons */
#status-menu .status-button:nth-of-type(1):hover::before,
#status-menu .status-button.on:nth-of-type(1)::before {
	color: hsl(var(--accent));
}
#status-menu .status-button:nth-of-type(2):hover::before,
#status-menu .status-button.on:nth-of-type(2)::before {
	color: hsl(var(--current));
}
#status-menu .status-button:nth-of-type(3):hover::before,
#status-menu .status-button.on:nth-of-type(3)::before {
	color: hsl(var(--completed));
}
#status-menu .status-button:nth-of-type(4):hover::before,
#status-menu .status-button.on:nth-of-type(4)::before {
	color: hsl(var(--paused));
}
#status-menu .status-button:nth-of-type(5):hover::before,
#status-menu .status-button.on:nth-of-type(5)::before {
	color: hsl(var(--dropped));
}
#status-menu .status-button:nth-of-type(6):hover::before,
#status-menu .status-button.on:nth-of-type(6)::before {
	color: hsl(var(--planned));
}