Template:Message box/styles.css

From NeuroWiki
Jump to navigation Jump to search
/* [[Category:模板样式]] */
.msgbox {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.6em;
	align-items: center;
	max-width: 80%;
	margin: 0.5em auto;
	padding: 0.3em 0.6em;
	border-left: 8px solid var(--custom-border-blue);
	background-color: var(--custom-table-background);
}

.msgbox + .msgbox {
	margin-top: -0.5em;
	border-top: 1px solid #bbc2c6;
}

.msgbox.has-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;
}

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

.msgbox + link + .msgbox {
	margin-top: -0.5em;
	border-top: 1px solid var(--custom-border-gray);
}

.msgbox.msgbox-default,
.msgbox.msgbox-notice {
	background-color: var(--custom-table-background);
	border-left-color: var(--custom-border-blue);
}

.msgbox.msgbox-red,
.msgbox.msgbox-warning {
	background-color: var(--custom-background-red);
	border-left-color: var(--custom-border-red);
}

.msgbox.msgbox-orange,
.msgbox.msgbox-content {
	background-color: var(--custom-background-orange);
	border-left-color: var(--custom-border-orange);
}

.msgbox.msgbox-yellow,
.msgbox.msgbox-style {
	background-color: var(--custom-background-yellow);
	border-left-color: var(--custom-border-yellow);
}

.msgbox.msgbox-green,
.msgbox.msgbox-status {
    background-color: var(--custom-background-green);
    border-left-color: var(--custom-border-green);
}

.msgbox.msgbox-cyan,
.msgbox.msgbox-version {
    background-color: var(--custom-background-cyan);
    border-left-color: var(--custom-border-cyan);
}

.msgbox.msgbox-magenta {
    background-color: var(--custom-background-magenta);
    border-left-color: var(--custom-border-magenta);
}

.msgbox.msgbox-purple,
.msgbox.msgbox-move {
    background-color: var(--custom-background-purple);
    border-left-color: var(--custom-border-purple);
}

.msgbox.msgbox-grey,
.msgbox.msgbox-protection {
    background-color: var(--custom-background-grey);
    border-left-color: var(--custom-border-gray);
}

.msgbox.msgbox-black {
	background-color: #000000;
	border-left-color: #FFFFFF;
}

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

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

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

.msgbox-text p {
	margin: 0;
}