User:Alistair3149/sandbox/styles.css

.mh-notice { position: relative; /* For dismiss button */ padding: 1rem; padding-right: 3rem; /* Save space for dismiss button */ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.75rem; border-left: 4px solid #a2a9b1; /* WMUI Base 50 */ background: #f8f9fa; /* WMUI Base 90 */ }

.mh-notice--destructive { border-left-color: #d33; /* WMUI Red 50 */ background: #fee7e6; /* WMUI Red w90 */ }

.mh-notice--success { border-left-color: #00af89; /* WMUI Green 50 */ background: #d5fdf4; /* WMUI Green 90 */ }

.mh-notice--warning { border-left-color: #fc3; /* WMUI Yellow 50 */ background: #fef6e7; /* WMUI Yellow 90 */ }

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

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

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

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

.mh-notice__buttons { display: flex; flex-wrap: wrap; white-space: nowrap; justify-content: flex-end; gap: 0.25rem; }

.mh-notice__dismiss { position: absolute; top: 0; right: 0; width: 3rem; /* 48px - recommended touch area */ height: 3rem; display: grid; place-content: center; cursor: pointer; }

/* No need for active state, as the notice just gtfo */ .mh-notice__dismiss:hover { background-color: rgba( 0, 0, 0, 0.05 ); }

@media screen and (min-width: 720px) { .mh-notice, .mh-notice__content { flex-wrap: nowrap; } }