MediaWiki:Centralnotice-template-rae template v2

<style> /* Colors */ .cbnnr {

   color-scheme: light;
   --cbnnr-base: #202122;
   --cbnnr-base-hover: #404244;
   --cbnnr-background: #f8f9fa;
   --cbnnr-border: #c8ccd1;
   --cbnnr-close-background: #eaecf0;

   /* Purple options */ /*
   --cbnnr-purple-background: #EEEAFF;
   --cbnnr-purple-border: #EEEAFF; */

}

@media screen {

   html.skin-theme-clientpref-night .cbnnr {
       color-scheme: dark;
       --cbnnr-base: #eaecf0;
       --cbnnr-base-hover: #f8f9fa;
       --cbnnr-background: #202122;
       --cbnnr-border: #54595d;
       --cbnnr-close-background: #27292d;

       /* Purple options */ /*
       --cbnnr-purple-background: #27292D;
       --cbnnr-purple-border: #c8ccd1; */
   }

}

/* Main styling */ .cbnnr-full-link {

   display: block;
   height: 100%;
   width: 100%;
   cursor: pointer;
   text-decoration: none;

} /* Remove and add <a> tag to text if you want in-text links. Default is for the entire banner to be clickable. */

.cbnnr-full-link:hover {

   text-decoration: none;
   text-decoration-color: var(--cbnnr-base, #202122);

}

.cbnnr-container {

   background: var(--cbnnr-background, #f8f9fa);
   border: 2px solid var(--cbnnr-border, #c8ccd1);
   border-radius: 2px;
   padding: 10px;
   display: flex;
   align-items: center;
   text-align: left;
   margin: 0 auto 24px auto; /* auto in case we want to apply a max-width */

}

.cbnnr-image {

   margin: auto 20px;
   padding: 5px 0px;

}

.cbnnr-text {

   color: var(--cbnnr-base, #202122);
   font-size: 20px;
   margin: auto 10px;
   flex: 1 0 0;

}

.cbnnr-text p {

   margin: 0px;

}

a:hover #cbnnr-lineone {

   text-decoration: none;

}

a:hover #cbnnr-linetwo {

   text-decoration: underline;

}

1. cbnnr-linetwo {

   font-weight: bold;

}

.cbnnr-close {

   margin: auto 15px;
   border-radius: 50%;
   height: 44px;
   width: 44px;
   border: 0;
   background-color: var(--cbnnr-close-background);
   display: flex;
   justify-content: center;
   align-items: center;
   opacity: .6;
   cursor: pointer;
   align-self: center;
   }

.cbnnr-close svg {

   fill: var(--cbnnr-base);
   }

.cbnnr-close:hover {

   opacity: 1;
   }

</style>

   <a class="cbnnr-full-link" href="//meta.wikimedia.org/wiki/Main_Page">

       <figure class="cbnnr-image">
           <img src="//upload.wikimedia.org/wikipedia/commons/7/75/Wikimedia_Community_Logo.svg" height="50" alt="Wikipedia Asian Month"/>
       </figure>

This is a short description of my event.

Join us for the event!

       <button class="cbnnr-close" aria-label="Hide" onclick="mw.centralNotice.hideBanner(); return false;">
           <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 20 20" aria-hidden="true">
               <g><path d="m4.34 2.93 12.73 12.73-1.41 1.41L2.93 4.35z"></path><path d="M17.07 4.34 4.34 17.07l-1.41-1.41L15.66 2.93z"></path></g>
           </svg>
       </button>

   </a>