Template:Swaggbox/styles.css: Difference between revisions

Latest revision as of 04:11, 16 October 2026

.template-swaggbox {
	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-swaggbox[data-hastwoimages="false"] {
	grid-template-columns: auto 1fr; 
	grid-template-areas: "image1 text";
}

.template-swaggbox
.template-swaggbox * {
	box-sizing: border-box;
}

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

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

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

.template-swaggbox.page-issue.ok {
	background: linear-gradient(#B6EFBA, white);
	border-color: #88F78D; 
	border-left-color: #52d85b;
}

.template-swaggbox.page-issue.info {
	background: linear-gradient(#dce9fc, white);
	border-color: #A0C6F7; 
	border-left-color: #5457e5;
}

.template-swaggbox.page-issue.specialinfo { /* This should only be used in rare instances, for example in Gimmicktemplate, Exhibit and Admincategory. Try not to spam this too much... */
	background: linear-gradient(#FFD8FF, white);
	border-color: #FFA5FF; 
	border-left-color: #800080;
}

.template-swaggbox.page-issue.warning {
	background: linear-gradient(#fcebdc, white);
	border-color: #eed6d2;
	border-left-color: #FF9D00;
}

.template-swaggbox.page-issue.critical {
	background: linear-gradient(#FF9999, #fff0f0 4rem);
	border-color: #e23639;
}

.template-swaggbox.page-issue.supercritical { /* This should only really be used for Multipleissues and Delete for now... */
	background: linear-gradient(#ff5757, #fff0f0 4rem);
	border-color: #e23639;
}

@media screen and (max-width: 400px) {
	.template-swaggbox>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; 
	}
}