Template:Inline box/styles.css

.hgw-inline-box {
	box-sizing: border-box;
	border: 1px solid #a2a9b1;
	background-color: #fbfbfb;
	padding: 0.5em;
	margin: 0.5em 0;
}

.hgw-inline-box-image {
	vertical-align: top;
	position: relative;
	padding-right: 0.5em;
	top: -1px;
}

.hgw-inline-box-text {
}

/* specific kinds of box styles should go here */
/* make sure to also add in the dark theme section */
.hgw-inline-box-warning {
	background-color: #ffe7ce;
	border-color: #f28500;
}
.hgw-inline-box-critical {
	background-color: #fee7e6;
	border-color: #b32424;
}
.hgw-inline-box-info {
	background-color: #d8e8ff;
	border-color: #36c;
}
.hgw-inline-box-success {
	background-color: #d7ffe0;
	border-color: #68a174;
}

@media (prefers-color-scheme: dark) {
	body.skin-timeless .hgw-inline-box {
		background-color: #36415b;
		border-color: #5e7288;
	}
	
	body.skin-timeless .hgw-inline-box-warning {
		background-color: #504438;
		border-color: #f28500;
	}
	
	body.skin-timeless .hgw-inline-box-critical {
		background-color: #6c4543;
		border-color: #b32424;
	}
	
	body.skin-timeless .hgw-inline-box-info {
		background-color: #273241;
		border-color: #36c;
	}
	
	body.skin-timeless .hgw-inline-box-success {
		background-color: #3c5442;
		border-color: #68a174;
	}
}

/* i love duplicate code, oh wait css variables could probably solve this, but meh */

html.skin-citizen-dark .hgw-inline-box {
	background-color: #36415b;
	border-color: #5e7288;
}
	
html.skin-citizen-dark .hgw-inline-box-warning {
	background-color: #504438;
	border-color: #f28500;
}

html.skin-citizen-dark .hgw-inline-box-critical {
	background-color: #6c4543;
	border-color: #b32424;
}

html.skin-citizen-dark .hgw-inline-box-info {
	background-color: #273241;
	border-color: #36c;
}

html.skin-citizen-dark .hgw-inline-box-success {
	background-color: #3c5442;
	border-color: #68a174;
}