Template:Banner/styles.css

.banner-wrapper {
	position: relative;
	display: inline-block;
	width: 21px;
	height: 41px;
	image-rendering: crisp-edges;
}

.banner-wrapper p {
	line-height: 0;
	margin: 0;
}

.banner-wrapper .banner {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

.banner-color-white {
	/*filter: hue-rotate(169.992deg) saturate(0.0235) brightness(3.5);*/
	filter: invert(1%) sepia(30%) saturate(33%) hue-rotate(96deg) brightness(99%) contrast(93%);
}
.banner-color-orange {
	/*filter: hue-rotate(27deg) saturate(0.8835) brightness(4.4765);*/
	filter: invert(52%) sepia(75%) saturate(825%) hue-rotate(351deg) brightness(98%) contrast(90%);
}
.banner-color-magenta {
	/*filter: hue-rotate(304.956deg) saturate(0.608) brightness(4.2805);*/
	filter: invert(73%) sepia(65%) saturate(1265%) hue-rotate(268deg) brightness(114%) contrast(83%);
}
.banner-color-light_blue {
	/*filter: hue-rotate(194.616deg) saturate(0.7339) brightness(4.3549);*/
	filter: invert(35%) sepia(56%) saturate(515%) hue-rotate(151deg) brightness(83%) contrast(97%);
}
.banner-color-yellow {
	/*filter: hue-rotate(48.204deg) saturate(0.7598) brightness(4.4961);*/
	filter: invert(16%) sepia(36%) saturate(916%) hue-rotate(346deg) brightness(107%) contrast(91%);
}
.banner-color-lime {
	/*filter: hue-rotate(85.356deg) saturate(0.8442) brightness(4.2804);*/
	filter: invert(29%) sepia(80%) saturate(1534%) hue-rotate(38deg) brightness(96%) contrast(76%);
}
.banner-color-pink {
	/*filter: hue-rotate(342.108deg) saturate(0.428) brightness(4.6529);*/
	filter: invert(18%) sepia(13%) saturate(4114%) hue-rotate(294deg) brightness(99%) contrast(84%);
}
.banner-color-gray {
	/*filter: hue-rotate(196.38deg) saturate(0.1341) brightness(1.3216);*/
	filter: invert(74%) sepia(6%) saturate(597%) hue-rotate(145deg) brightness(96%) contrast(93%);
}
.banner-color-light_gray {
	/*filter: hue-rotate(60.012deg) saturate(0.0382) brightness(3.1157);*/
	filter: invert(36%) sepia(3%) saturate(503%) hue-rotate(22deg) brightness(95%) contrast(90%);
}
.banner-color-cyan {
	/*filter: hue-rotate(180deg) saturate(0.859) brightness(2.1118);*/
	filter: invert(57%) sepia(73%) saturate(687%) hue-rotate(135deg) brightness(91%) contrast(84%);
}
.banner-color-purple {
	/*filter: hue-rotate(278.964deg) saturate(0.7283) brightness(1.7216);*/
	filter: invert(79%) sepia(43%) saturate(2847%) hue-rotate(259deg) brightness(100%) contrast(100%);
}
.banner-color-blue {
	/*filter: hue-rotate(235.62deg) saturate(0.6471) brightness(1.6667);*/
	filter: invert(79%) sepia(62%) saturate(1044%) hue-rotate(200deg) brightness(92%) contrast(105%);
}
.banner-color-brown {
	/*filter: hue-rotate(25.2deg) saturate(0.6183) brightness(1.2137);*/
	filter: invert(72%) sepia(63%) saturate(453%) hue-rotate(342deg) brightness(94%) contrast(86%);
}
.banner-color-green {
	/*filter: hue-rotate(77.652deg) saturate(0.8226) brightness(2.4863);*/
	filter: invert(66%) sepia(100%) saturate(350%) hue-rotate(37deg) brightness(95%) contrast(93%);
}
.banner-color-red {
	/*filter: hue-rotate(3.492deg) saturate(0.7841) brightness(1.1902);*/
	filter: invert(77%) sepia(61%) saturate(1531%) hue-rotate(332deg) brightness(91%) contrast(105%);
}
.banner-color-black {
	/*filter: hue-rotate(240.012deg) saturate(0.1212) brightness(0.6294);*/
	filter: invert(97%) sepia(11%) saturate(717%) hue-rotate(202deg) brightness(97%) contrast(91%);
}