Template:T/styles.css

/* Phabricator-like tag styling */
/* Styles and colours were copied from Phabricator's light and dark mode CSS */
.phui-tag-wrapper,
.phui-tag {
	color: black;
	font: 13px 'Segoe UI', 'Segoe UI Web Regular', 'Segoe UI Symbol', 'Lato',
		'Helvetica Neue', Helvetica, Arial, sans-serif;
	line-height: 1.51em;
	font-weight: bold;
}

.phui-tag-wrapper .phui-tag-core,
.phui-tag {
	background-color: #EBECEE;
	border: 1px solid #C7CCD9;
	border-radius: 3px;
	padding: 0 4px;
}

.phui-tag-wrapper > a:hover .phui-tag-core,
.phui-tag:hover {
	border-color: #A1A6B0;
}

.phui-tag > a.external {
	/* copied from `.plainlinks a.external { ... }`: */
	background: none !important;
	padding: 0 !important;
}

.phui-tag-wrapper > a,
.phui-tag-wrapper > a:visited,
.phui-tag > a,
.phui-tag > a:visited {
	color: black;
}

@media screen {
	html.skin-theme-clientpref-night .phui-tag-wrapper,
	html.skin-theme-clientpref-night .phui-tag-wrapper > a,
	html.skin-theme-clientpref-night .phui-tag-wrapper > a:visited,
	html.skin-theme-clientpref-night .phui-tag,
	html.skin-theme-clientpref-night .phui-tag > a,
	html.skin-theme-clientpref-night .phui-tag > a:visited {
		color: rgba(255, 255, 255, .9);
	}

	html.skin-theme-clientpref-night .phui-tag-wrapper .phui-tag-core,
	html.skin-theme-clientpref-night .phui-tag {
		background-color: #304a6d;
		border-color: rgba(255, 255, 255, .3);
	}

	html.skin-theme-clientpref-night .phui-tag-wrapper > a:hover .phui-tag-core,
	html.skin-theme-clientpref-night .phui-tag > a:hover {
		border-color: rgba(255, 255, 255, .6);
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .phui-tag-wrapper,
	html.skin-theme-clientpref-os .phui-tag-wrapper > a,
	html.skin-theme-clientpref-os .phui-tag-wrapper > a:visited,
	html.skin-theme-clientpref-os .phui-tag,
	html.skin-theme-clientpref-os .phui-tag > a,
	html.skin-theme-clientpref-os .phui-tag > a:visited {
		color: rgba(255, 255, 255, .9);
	}

	html.skin-theme-clientpref-os .phui-tag-wrapper .phui-tag-core,
	html.skin-theme-clientpref-os .phui-tag {
		background-color: #304a6d;
		border-color: rgba(255, 255, 255, .3);
	}

	html.skin-theme-clientpref-os .phui-tag-wrapper > a:hover .phui-tag-core,
	html.skin-theme-clientpref-os .phui-tag > a:hover {
		border-color: rgba(255, 255, 255, .6);
	}
}