Module:Message box/imbox.css: Difference between revisions

/* {{pp|small=y}} */
.imbox {
	margin: 4px 0;
	border: 3px solid #36c;    /* Default "notice" blue */
	background-color: var(--background-color-interactive-subtle, #f8f9fa); 
	box-sizing: border-box;
	overflow-x: hidden;
}

/* For imboxes inside imbox-text cells. */
.imbox .mbox-text .imbox {
	margin: 0 -0.6em; /* 1 - 0.6 = 0.4em left/right. */
}

.imbox-speedy {
	border: 3px solid #b32424;    /* Red */
	background-color: #fee7e6;    /* Pink */
}

.imbox-delete {
	border: 3px solid #b32424;    /* Red */
}

.imbox-content {
	border: 3px solid #f28500;    /* Orange */
}

.imbox-style {
	border: 3px solid #fc3;       /* Yellow */
}

.imbox-move {
	border: 3px solid #9932cc;    /* Purple */
}

.imbox-protection {
	border: 3px solid #a2a9b1;    /* Gray-gold */
}

.imbox-license {
	border: 3px solid #88a;       /* Dark gray */
}

.imbox-featured {
	border: 3px solid #cba135;    /* Brown-gold */
}

.imbox .mbox-text {
	padding: 0.35em 1em;
	flex: 1 1 100%;
}

.imbox .mbox-image,
.imbox .mbox-imageright {
	padding: 4px 2px;
	text-align: center;
	flex: none;
}

/* keep synced with each other type of message box as this isn't qualified */
.mbox-invalid-type {
	text-align: center;
}

@media (min-width: 480px) {
	.imbox:not(.mbox-with-below),
	.imbox .mbox-flex {
		display: flex;
		align-items: center;
	}

	.imbox .mbox-image {
		/* @noflip */
		padding-left: 1em;
	}
	
	.imbox .mbox-imageright {
		/* @noflip */
		padding-right: 1em;
	}
}

@media (min-width: 640px) {
	.imbox {
		margin: 4px 10%;
	}
}

@media screen {
    html.skin-theme-clientpref-night .imbox-speedy {
		background-color: #310402;    /* Dark red, same hue/saturation as light */
	}
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-theme-clientpref-os .imbox-speedy {
		background-color: #310402; /* Dark red, same hue/saturation as light */
	}
}