Template:Msgbox/styles.css: Difference between revisions

From OSDev.wiki
Jump to navigation Jump to search
[unchecked revision][unchecked revision]
Content added Content deleted
mNo edit summary
mNo edit summary
 
(11 intermediate revisions by 3 users not shown)
Line 4: Line 4:
gap: 0.6em;
gap: 0.6em;
align-items: center;
align-items: center;
max-width: 80%;
max-width: 90%;
margin: 0.5em auto;
margin: 0 auto;
padding: 0.3em 0.6em;
padding: 0.3em 0.6em;
border-top: 8px solid #36e;
border-top: 8px solid #36e;
background-color: #f8f9fa;
background-color: #f8f9fa;
clear: both;
}
}


.msgbox.with-image {
.msgbox:not(.msgbox-mini):last-of-type {
margin-bottom: 0.5em;
}

.msgbox.msgbox-image {
grid-template-columns: max-content 1fr;
grid-template-columns: max-content 1fr;
}
}
Line 21: Line 26:
padding: 0 0.3em;
padding: 0 0.3em;
max-width: max-content;
max-width: max-content;
clear: none;
margin-bottom: 0.5em;
}
}


Line 45: Line 52:
background-color: #cfc;
background-color: #cfc;
border-color: #5d5;
border-color: #5d5;
}

.msgbox-body.align-left {
text-align: left;
}
.msgbox-body.align-center {
text-align: center;
}
.msgbox-body.align-right {
text-align: right;
}
}



Latest revision as of 10:34, 15 June 2024

.msgbox {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6em;
	align-items: center;
	max-width: 90%;
	margin: 0 auto;
	padding: 0.3em 0.6em;
	border-top: 8px solid #36e;
	background-color: #f8f9fa;
	clear: both;
}

.msgbox:not(.msgbox-mini):last-of-type {
	margin-bottom: 0.5em;
}

.msgbox.msgbox-image {
	grid-template-columns: max-content 1fr;
}

.msgbox.msgbox-mini {
	gap: 0.3em;
	margin-left: 0;
	margin-right: 0;
	padding: 0 0.3em;
	max-width: max-content;
	clear: none;
	margin-bottom: 0.5em;
}

@media screen and (max-width: 720px) {
	.msgbox {
		max-width: 100%;
	}
}

.msgbox.msgbox-default,
.msgbox.msgbox-notice {
	background-color: #f8f9fa;
	border-color: #36e;
}

.msgbox.msgbox-red,
.msgbox.msgbox-warning {
	background-color: #fcc;
	border-color: #e44;
}

.msgbox.msgbox-green,
.msgbox.msgbox-status {
    background-color: #cfc;
    border-color: #5d5;
}

.msgbox-text p {
	margin: 0;
}