Module:Tracklist/styles.css

.tracklist {
	border-spacing: 0;
}

.tracklist tbody {
    color: #333; /* [[mw:Recommendations_for_night_mode_compatibility_on_Wikimedia_wikis#Always_define_color_when_defining_background]] */
}

/* set on all rows we can set the total length row to transparent */
.tracklist tr {
	background-color: #f7f7f7;
}

.tracklist tr:nth-child(2n-1) {
	background-color: #fff;
}

.tracklist tr.tlheadline {
	background-color: transparent;
}

.tracklist caption {
	text-align: left;
	font-weight: bold;
}

.tracklist td,
.tracklist th[scope="row"] {
	vertical-align: top;
}

.tracklist th[scope="col"] {
	text-align: left;
	background-color: #eee;
}

.tracklist th.tlheader,
.tracklist th[scope="row"],
.tracklist-length,
.tracklist-total-length td {
	padding-right: 10px;
	text-align: left;
}

.tracklist th[scope="row"] {
	font-weight: normal;
}

.tracklist tr.tracklist-total-length {
	background-color: transparent;
}

.tracklist .tracklist-total-length th {
	padding: 0;
	font-weight: bold;
}

.tracklist-total-length th > span {
	float: right;
	padding-left: 10px;
	background-color: #eee;
}

.tracklist-total-length td {
	background-color: #eee;
	font-weight: bold;
	padding: 0 10px 0 0;
}

/* Night theme */

@media screen {
    html.skin-theme-clientpref-night .tracklist tr {
		background-color: #202122;
	}
	
	html.skin-theme-clientpref-night .tracklist tr:nth-child(2n-1) {
		background-color: #000;
	}
	
	html.skin-theme-clientpref-night .tracklist tr.tlheadline {
		background-color: transparent;
	}
	
	html.skin-theme-clientpref-night .tracklist th[scope="col"],
	html.skin-theme-clientpref-night .tracklist-total-length td,
	html.skin-theme-clientpref-night .tracklist-total-length th > span {
		background-color: #27292d
	
	}
	
	html.skin-theme-clientpref-night .tracklist tbody {
	    color: #ccc;
	}
}


/* This should be a copy of the rules above with replace( /clientpref-(1)/, '2' ) */
@media screen and ( prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .tracklist tr {
		background-color: #202122;
	}

	html.skin-theme-clientpref-os .tracklist tr:nth-child(2n-1) {
		background-color: #000;
	}

	html.skin-theme-clientpref-os .tracklist tr.tlheadline {
	background-color: transparent;
}

	html.skin-theme-clientpref-os .tracklist th[scope="col"],
	html.skin-theme-clientpref-os .tracklist-total-length td,
	html.skin-theme-clientpref-os .tracklist-total-length th > span {
		background-color: #27292d

	}

	html.skin-theme-clientpref-os .tracklist tbody {
		color: #ccc;
	}

}