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; }