Szablon:Mbox/style.css

.mbox {
	border: 1px solid var(--border-color-base, #a2a9b1);
	border-left: 10px solid var(--color-progressive, #36c);
	background-color: var(--background-color-neutral-subtle, #f8f9fa);
	box-sizing: border-box;

	/*
	* zmieniając dolny margines, zaktualizuj regułę .mbox + .mbox poniżej
	* marginesy z boku są określone na 10% zamiast width:80%; margin:... auto; aby
	* szablon wyświetlał się dobrze obok pływających elementów
	*/
	margin: 0 10% 0.5em 10%;
	
	display: grid;
	padding: .3em;
	gap: .3em;
	/*grid-template-columns: min-content 1fr;*/
	grid-template-columns: 60px 1fr;
	align-items: center;
	word-break: break-word; /* aby łamać długie linki na wąskich wyświetlaczach */
}
.mbox.with-iconright {
	grid-template-columns: 60px 1fr min-content;
}
.mbox.without-icon {
	grid-template-columns: 1fr;
}
.mbox.without-icon.with-iconright {
	grid-template-columns: 1fr min-content;
}
.mbox-iconright,
.mbox-icon {
	justify-self: center;
}
.mbox-icon img {
	max-width: 100%;
	object-fit: contain;
}
.mbox p {
	font-size: inherit; /* Dla wersji mobilnej */
	padding: 0; /* Wersja mobilna daje w akapitach padding zamiast/oprócz margin */
	margin: 0.5em 0;
}
/* Usuń nadmiarowe marginesy */
.mbox-text > p:first-child {
	margin-top: 0;
}
.mbox-text > p:last-child {
	margin-bottom: 0;
}
@media (max-width: 720px) {
	.mbox {
		margin-left: 0;
		margin-right: 0;
	}
}
@media (max-width: 600px) {
	.mbox {
		width: 100%;
	}
}
@media (max-width: 450px) {
	.mbox-iconright {
		grid-row: 2;
		grid-column: 1 / span 2;
		justify-self: end;
	}
	.mbox.with-iconright {
		grid-template-columns: 40px 1fr;
	}
	.mbox.without-icon.with-iconright {
		grid-template-columns: 1fr;
	}
	.mbox {
		grid-template-columns: 40px 1fr;
		font-size: 0.85rem;
	}
}

.mbox + .mbox {
	margin-top: calc(-0.5em + 2px); /* skasowanie odstępu i nakładanie ramek*/
}

/* kolorowe marginesy; oprócz niebieskiego, odcień kolorów pasuje do trybu jasnego i ciemnego */
.mbox.mbox-serious {
  border-left-color: #d33;
}
.mbox.mbox-content {
  border-left-color: #f28500;
}
.mbox.mbox-notice {
  border-left-color: var(--color-progressive, #36c);
}
.mbox.mbox-merge {
  border-left-color: #9932cc;
}

/* Na stronach plików wypełnij całą szerokość, analogicznie do szablonów przychodzących z Commons */
body.ns-6 .mbox {
	width: unset;
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
}