MediaWiki:Centralnotice-template-Fundraiser2023 6

.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 */ font-family: sans-serif; } .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--cn { border-left-color: 2C670F; background: #F8FFF5; } .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; font-size: 120%; } .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 */ .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; } }  <path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"/>        <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>