User:Alistair3149/sandbox/styles.css

.mh-notice { position: relative; /* For dismiss button */ padding: 1rem; border-left: 4px solid #a2a9b1; /* WMUI Base50 */ background: #f8f9fa; /* WMUI Base90 */ }

.mh-notice--warning { border-left-color: #fc3; /* WMUI Yellow50 */ background: #fef6e7; /* WMUI Yellow90 */ }

.mh-notice__content { display: flex; align-content: center; gap: 0.75rem; }

.mh-notice__icon { margin-top: 0.25rem; /* HACK: align with text */ }

.mh-notice__title { color: #000; /* WMUI Base0 */ font-weight: bold; }

.mh-notice__body { color: #202122; /* WMUI Base10 */ }

.mh-notice__buttons { margin-top: 0.75rem; display: flex; flex-wrap: wrap; white-space: nowrap; gap: 0.25rem; }

.mh-notice__dismiss { position: absolute; top: 0; right: 0; }

@media screen and (max-width: 720px) { .mh-notice__content { flex-wrap: wrap; } }