Szablon:Ambox/style.css

Wersja z dnia 19:42, 18 lis 2025 autorstwa Wawrzec (dyskusja | edycje) (drobne)
(różn.) ← poprzednia wersja | przejdź do aktualnej wersji (różn.) | następna wersja → (różn.)
.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;

	margin: 0 10% 0.35em 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;
}
/* Usuwanie nadmiarowych marginesów */
.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*/
}

/* marginesy i tła */
.mbox.mbox-speedy {
  border-left-color: #d33;
  background-color: #fee7e6;}
  html.skin-theme-clientpref-night .mbox.mbox-speedy {
  	background-color: #650000;
  }
  @media screen and (prefers-color-scheme: dark) {
	html.mbox.mbox-speedy {
		background-color: #aa0000;
	}
}
.mbox.mbox-serious {
  border-left-color: #d33;
}
.mbox.mbox-content {
  border-left-color: #f28500;
}
.mbox.mbox-style {
  border-left-color: #fc3;
}
.mbox.mbox-medal {
  border-left-color: #eac908;
}
.mbox.mbox-good {
  border-left-color: #35f235;
}
.mbox.mbox-goodness {
  border-left-color: #35f2f2;
}
.mbox.mbox-info {
  border-left-color: #36c;
}
.mbox.mbox-merge {
  border-left-color: #9932cc;
}
.mbox.mbox-pink {
  border-left-color: #ef3ffe;
}
.mbox.mbox-protect {
  border-left-color: #c0c0c0;
}
.mbox.mbox-office {
  border-left-color: #000000;
}

/* szerokość jest zwiększana w przypadku plików */
body.ns-6 .mbox {
	width: unset;
	max-width: unset;
	margin-left: 0;
	margin-right: 0;
}