Template:Infobox YouTube personality/styles.css

/* {{pp|small=yes}} */
/* youtube color branding */
.ib-youtube-title,
.ib-youtube-above,
.ib-youtube-header,
.ib-youtube-awards-color {
	background-color: #B60000;
	color: white;
}

.ib-youtube-above {
	font-size: 125%;
}

.ib-youtube-above .honorific-prefix,
.ib-youtube-above .honorific-suffix {
	font-size: small;
	font-weight: normal;
}

/* override blue link on red background */
.ib-youtube-above .honorific-prefix a,
.ib-youtube-above .honorific-suffix a,
.ib-youtube-awards-color a,
.ib-youtube-awards-color .mw-collapsible-text,
.ib-youtube-awards-color .mw-collapsible-toggle::before,
.ib-youtube-awards-color .mw-collapsible-toggle::after {
	color: white;
}

.ib-youtube-header {
	line-height: 1.5em;
}

.ib-youtube-title {
	line-height: 1.6em;
}

.ib-youtube .infobox-full-data {
	padding: 0;
}

.ib-youtube div.nickname,
.ib-youtube div.birthplace,
.ib-youtube div.deathplace {
	display: inline;
}

.ib-youtube-awards {
	width: 100%;
	display: inline-table;
	border-spacing: 0;
	margin: 0; /* mobile fix */
}

.ib-youtube-awards th div {
	text-align: center;
	margin: 0 4em;
}

.ib-youtube-awards td {
	vertical-align: middle;
}

.ib-youtube-below {
	color: darkslategray;
}

/* mobile fixes */
body.skin-minerva .ib-youtube-title {
	padding: 7px;
}

body:not(.skin-minerva) .ib-youtube-awards td {
	padding: 3px;
}

body.skin-minerva .ib-youtube-below hr:first-of-type {
	display: none;
}

/* Dark mode set from reading preferences */
@media screen {
	/* extra CSS class (.ib-youtube) and !important tag needed to overcome the 
	specificity on a default RetroWikipedia dark mode stylesheet */
	html.skin-theme-clientpref-night .ib-youtube .ib-youtube-title,
	html.skin-theme-clientpref-night .ib-youtube .ib-youtube-above,
	html.skin-theme-clientpref-night .ib-youtube .ib-youtube-header,
	html.skin-theme-clientpref-night .ib-youtube .ib-youtube-awards-color {
		background-color: #B60000 !important;
		color: white !important;
	}
	html.skin-theme-clientpref-night .ib-youtube .ib-youtube-signature span:not(.skin-invert):not(.skin-invert-image) img {
		filter: invert(1);
	}
	
}
/* Dark mode set through operating system */
@media screen and (prefers-color-scheme: dark) {
	/* extra CSS class (.ib-youtube) and !important tag needed to overcome the 
	specificity on a default RetroWikipedia dark mode stylesheet */
	html.skin-theme-clientpref-os .ib-youtube .ib-youtube-title,
	html.skin-theme-clientpref-os .ib-youtube .ib-youtube-above,
	html.skin-theme-clientpref-os .ib-youtube .ib-youtube-header,
	html.skin-theme-clientpref-os .ib-youtube .ib-youtube-awards-color {
		background-color: #B60000 !important;
		color: white !important;
	}
	html.skin-theme-clientpref-os .ib-youtube .ib-youtube-signature span:not(.skin-invert):not(.skin-invert-image) img {
		filter: invert(1);
	}
}