MediaWiki:Centralnotice-template-Fundraiser2022

.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 #2C670F; /* WMUI Base 50 */ background: #F8FFF5; /* WMUI Base 90 */ } .mh-notice--success { border-left-color: #00af89; /* WMUI Green 50 */ background: #d5fdf4; /* WMUI Green 90 */ } .mh-notice__content { display: flex; flex-wrap: wrap; align-content: center; gap: 0.75rem; } .mh-notice__icon { margin-top: 1rem; /* 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; } }           <span class="mh-notice__button mw-ui-button"> </a> <div class="mh-notice__dismiss"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <path id="x" d="M18.717 6.697l-1.414-1.414-5.303 5.303-5.303-5.303-1.414 1.414 5.303 5.303-5.303 5.303 1.414 1.414 5.303-5.303 5.303 5.303 1.414-1.414-5.303-5.303z"/></g> </a>