Template:Infobox/styles.css

/*TODO TODO: Remove the fallback value till CSS variable are fixed :pooo:*/
/*TODO: CREATE A SEPARATE RARITY COLOR DEFINITION PAGE FOR REUSABILITY IN OTHER TEMPLATES*/
.rarity-mythical {
  background-color: var(--rarity-mythical-bg-color, #19D9FF);
  color: var(--rarity-mythical-text-color, white);
}

.rarity-legendary {
  background-color: var(--rarity-legendary-bg-color, #d82121);
  color: var(--rarity-legendary-text-color, white);
}

.rarity-widespread {
  background-color: var(--rarity-widespread-bg-color,#f5f5f5);
  color: var(--rarity-widespread-text-color, black);
}

.rarity-common {
  /*UNCOMMENT ONCE THE CSS VARIABLE ISSUE FIXES ITSELF*/
  /*background-color: var(--rarity-common-bg-color, #99ff99);*/
  /*color: var(--rarity-common-text-color, black);*/
  
  background-color: #99ff99;
  color: black;
}

.rarity-uncommon {
  background-color: var(--rarity-uncommon-bg-color, #ffff66);
  color: var(--rarity-uncommon-text-color, black);
}

.rarity-rare {
  background-color: var(--rarity-rare-bg-color, #e0a6ff);
  color: var(--rarity-rare-text-color, white);
}

.rarity-ultrarare {
  background-color: var(--rarity-ultrarare-bg-color, #66a3ff);
  color: var(--rarity-ultrarare-text-color, white);
}

.rarity-epic {
  background-color: var(--rarity-epic-bg-color, #ffbb33);
  color: var(--rarity-epic-text-color, white);
}

.airport-international {
  background-color: #2473e3;
  color: white
}

.airport-airport {
  background-color: #2473e3;
  color: white
}

.airport-airfield {
  background-color: #00994c;
  color: white
}

.airport-military {
  background-color: #3f3f3f;
  color: white
}

.airport-heliport {
  background-color: #6a46a0;
  color: white
}

.airport-hospital {
  background-color: #b646a0;
  color: white
}

/*END OF TODO*/

.infobox {
	width: 22em;
	border: 0.5px solid grey;
	border-radius: 0 0 8px 8px;
	border-collapse: separate;
	border-spacing: 0;
	background-clip: padding-box;
	font-size: 75%;
	line-height: 1.4em;
	float: right;
	clear: right;
	margin: 0 0 1em 1em;
	letter-spacing: 0.02em;
}

.infobox__title {
	font-size: 160%;
	font-weight: bolder;
	text-align: center;
	padding: 1em;
	border: 0.5px solid grey;
	border-bottom: 0px;
	border-radius: 16px 16px 0 0;
}

.infobox__image {
	text-align: center;
	background-color: #1b1b1b;
	/*padding: 0.5em;*/
}

.infobox__caption {
	text-align: center;
	background-color: #18191c;
	color: white;
	font-style: italic;
	font-size: 85%;
	padding: 0.4em;
	border-bottom: 0.4px solid black;
}

.infobox__subtitles{
	text-align: center;
	background-color: #18191c;
	color: white;
	font-weight: bold;
	padding: 0.4em;
	border-top: 0.5px solid grey;
	border-bottom: 0.5px solid grey;
	line-height: 23px;
}

.infobox__field-center{
	color: white;
	text-align: center;
	width: 31%;
	padding: 0.4em;
	border-right: 0.4px solid black;
}

.infobox__field-name{
	background-color: #18191c;
	color: white;
	text-align: center;
	width: 31%;
	padding: 0.4em;
	border-right: 0.4px solid black;
}

.infobox__field-value{
	color: white;
	padding: 0.6em;
}

/*TODO: MAYBE CONSIDER SEPARATING THIS INTO A VEHICLE SPECIFIC INBOX STYLE*/
.infobox__rarity-value{
	border-radius: 100px;
	padding: 0.43em;
	width: 100%;
	display: block;
	text-align: center;
}
/*END OF TODO*/

.infobox tr:nth-child(even) .infobox__field-value {
  background-color: #101317; 
}

.infobox tr:nth-child(odd) .infobox__field-value {
  background-color: #0c0e12;
}