Template:Soybox/styles.css

.template-soybox {
	display: grid; 
	grid-template-columns: auto 1fr auto; 
	grid-template-areas: "image1 text image2";
	margin: 0.3rem auto; 
	padding: 0.3rem;
	align-items: center; 
	text-align: center; 
	gap: 0.5rem;
	word-break: break-word;
	overflow: hidden;
}

.template-soybox[data-hastwoimages="false"] {
	grid-template-columns: auto 1fr; 
	grid-template-areas: "image1 text";
}

.template-soybox,
.template-soybox * {
	box-sizing: border-box;
}

.template-soybox .content {
	display: flex; 
	flex-direction: column; 
	gap: 0.25rem;
	grid-area: text;
}

.template-soybox .line1 {
	font-size: 140%; 
	line-height: 1.75rem;
}

.template-soybox.page-issue {
	border-width: 1px; 
	border-style: solid; 
	border-left-width: 0.6rem;
	border-radius: 0.2rem;
}

.template-soybox.page-issue.ok {
	background: white;
	border-color: #b6f9ba; 
	border-left-color: #52d85b;
}

.template-soybox.page-issue.info {
	background: #EEF2FF; 
	border-color: #D6DAF0; 
	border-left-color: #5457e5;
}

.template-soybox.page-issue.warning {
	background: #fef6e7; 
	border-color: #eed6d2;
	border-left-color: #FF9D00;
}

.template-soybox.page-issue.critical {
	background: #fff0f0;
	border-color: #e23639;
}

@media screen and (max-width: 400px) {
	.template-soybox>span[typeof="mw:File"]:nth-of-type(2) {
		/* Dirty fix: Having two images on extremely small screens like this makes text wrap in an illegible manner. */
		display: none; 
	}
}