MediaWiki:Centralnotice-template-Anniversary2022

.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 */ .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="M77.93,85.16c-0.37,0-0.75,0.02-1.13,0.06c-2.07,6.54-8.79,9.4-15.89,8.52 c-11.15-1.37-21.38-9.85-24.81-20.5c-0.7-2.13-0.94-4.25-1.02-6.51c-0.2-5.82,0.92-12.05,6.75-14.46l0.07-0.03 c0.19-0.08,0.38-0.13,0.57-0.19c-0.42-0.63-0.85-1.29-1.26-2.02c-0.58-1.03-0.93-2.12-1.14-3.18c-6.25,2.18-10.06,7.7-12.73,13.78 C24.79,66.45,8.22,111.2,8.22,111.2l-2.22,6c-0.76,2.08-1.94,4.17-1.94,6.44c0,2.65,2.36,4.46,5.02,3.72 c1.78-0.5,3.74-1.42,5.55-2.14c3.83-1.56,10.93-4.63,10.93-4.63l29.68-12.22c0,0,14.31-5.18,20.33-10.85 c2.92-2.75,5.26-6.71,6.29-11.44c-0.21-0.11-0.43-0.23-0.65-0.32C80.21,85.35,79.14,85.16,77.93,85.16z" style="fill:#FCC21B;"/><path d="M45.86,29.19c1.38,4.78-2.3,8.47-2.7,13c-0.12,1.31-0.12,2.62,0.1,3.88 c0.14,0.82,0.37,1.62,0.78,2.35c0.54,0.96,1.16,1.83,1.73,2.73c0.56,0.87,1.06,1.75,1.4,2.76c0.75,2.24,0.23,4.26-0.09,6.48 c-0.26,1.77-1.16,3.44-2.24,4.84c-0.33,0.43-1.24,0.98-1.02,1.61c0.03,0.11,0.23,0.15,0.52,0.15c1.2,0,4.03-0.73,4.44-0.92 c1.8-0.87,2.85-2.63,3.78-4.33c1.38-2.52,2.27-5.46,1.88-8.35c-0.08-0.66-0.26-1.28-0.48-1.88c-0.67-1.79-1.78-3.39-2.41-5.22 c-0.08-0.22-0.16-0.44-0.22-0.67c-0.92-3.58,1.29-7.09,3.15-9.94c1.83-2.79,2.52-6.89,1.22-10.09c-0.66-1.62-1.72-3.24-3.01-4.43 c-1.53-1.42-3.86-2.71-3.6-5.16c0.22-2.13,1.66-4.37,2.75-6.13c0.54-0.89,2.24-2.71,2.18-3.73c-0.05-1.04-1.5-1.56-2.19-2.17 c-1.56-1.38-2.8-2.44-4.8-3.07c-0.36-0.12-0.66-0.17-0.94-0.17c-1.29,0-1.74,1.17-2.46,2.43c-1.32,2.33-2.62,4.79-3.5,7.31 c-1.66,4.68-1.91,9.51,1.68,13.89C43.05,25.89,45.34,27.39,45.86,29.19z" style="fill:#ED6C30;"/><path d="M62.08,69.54c0.25,0.26,0.48,0.37,0.69,0.37c0.39,0,0.7-0.4,0.95-0.87 c0.19-0.36,0.34-0.73,0.46-1.12c0.67-2.25,2-4.48,3.1-6.56c0.2-0.37,0.4-0.73,0.59-1.09c0.76-1.43,1.54-2.86,2.35-4.28 c0.63-1.12,1.26-2.25,1.94-3.33c1.78-2.85,4.18-5.89,7.2-7.48c1.9-1.02,4.04-1.49,5.95-2.5c2.17-1.13,3.44-2.84,4.85-4.79 c1.4-1.93,2.13-4.31,3.41-6.34c0.54-0.86,0.46-1.62,1.41-2.22c2.11-1.32,4.64-0.87,6.98-1.32c5.53-1.06,6.02-8.35,10.54-10.98 c0.95-0.55,1.92-1.06,2.88-1.57c0.56-0.3,1.64-0.67,2.03-1.22c0.67-0.94-0.6-2.17-0.98-3.03c-0.66-1.48-1.65-2.97-2.5-4.35 c-0.72-1.16-1.36-2.21-2.64-2.21l-0.25,0.02c-2.89,0.28-5.47,1.55-7.32,3.76c-2.25,2.7-2.55,6.87-6.09,8.35 c-2.3,0.96-5.01,0.58-7.19,1.91c-2.58,1.58-3.41,4.7-4.13,7.44c-0.54,2-0.57,4.41-2.09,5.98c-2.06,2.11-5.19,2.37-7.83,3.5 c-0.71,0.31-1.39,0.68-2,1.16c-3.35,2.64-5.25,6.97-6.75,10.85c-0.61,1.59-1.16,3.21-1.7,4.83c-0.5,1.51-0.99,3.02-1.46,4.54 c-0.24,0.78-0.5,1.56-0.74,2.35c-0.61,1.98-1.17,4.01-1.89,5.96C61.35,66.55,61.04,68.46,62.08,69.54z" style="fill:#ED6C30;"/><path d="M127.44,86.8c-0.19-0.2-0.46-0.22-0.73-0.22l-0.31,0.01l-0.17-0.01c-0.6-0.04-1.1-0.3-1.68-0.5 c-2.67-0.93-4.4-1.7-6.76-3.29c-2.66-1.79-5.71-3.46-8.99-3.61l-0.38-0.01c-3.24,0-6.23,1.71-9.48,1.71h-0.02 c-3.6-0.02-6.71-2.58-9.55-4.47c-0.24-0.16-0.48-0.31-0.74-0.45c-2.23-1.26-4.63-1.81-7.05-1.84c-0.06,0-0.13-0.02-0.19-0.02 c-1.67,0-3.35,0.26-4.99,0.72c-1.6,0.44-3.15,1.08-4.63,1.87c-2.11,1.12-4.14,2.47-5.99,3.97c-1.03,0.83-2.16,1.78-2.86,2.93 c-0.38,0.61-0.9,2.93,0.07,3.31l0.13,0.03c0.38,0,1-0.4,1.27-0.57c2.16-1.33,4.44-2.49,6.87-3.25c1.99-0.63,4.08-1.09,6.15-1.17 c0.17-0.01,0.35-0.02,0.52-0.02c1.49,0,2.97,0.23,4.41,0.79c0.02,0.01,0.04,0.02,0.06,0.03c2.01,0.8,3.69,2.18,5.35,3.53 c2.44,1.98,5.15,2.42,7.91,2.42c2.15,0,4.33-0.26,6.46-0.26c2.23,0,4.39,0.29,6.38,1.46c1.62,0.97,3.08,2.24,4.33,3.59 c1.38,1.47,3.14,2.7,5.21,3.02c0.88,0.14,1.68,0.21,2.57,0.22h0.02c1.5,0,2.07-1.73,2.83-2.72c1.04-1.34,1.76-2.88,2.71-4.29 C126.57,89.09,128.12,87.48,127.44,86.8z" style="fill:#ED6C30;"/>  <div class="mh-notice__title"> <div class="mh-notice__body"> <div class="mh-notice__buttons plainlinks"><a rel="nofollow" class="external text" href="https://meta.miraheze.org/wiki/Special:MyLanguage/Miraheze-7-year?useskin=vector-2022"><span class="mh-notice__button mw-ui-button mw-ui-progressive"> </a><a rel="nofollow" class="external text" href="https://meta.miraheze.org/wiki/Special:MyLanguage/Donate"><span class="mh-notice__button mw-ui-button"> </a> <div class="mh-notice__dismiss"><a href="#" title="Hide" onclick="mw.centralNotice.hideBanner;return false;"><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>