MediaWiki:Centralnotice-template-Community banner templatev2

<style>

/* Main banner container. Banner: background, border colour and width and adding a margin between banner and article header*/ .cnotice {

   position: relative;
   overflow: hidden;
   background: #f8f9fa;
   color: #202122;
   border: 1px solid #a2a9b1;
   border-radius: 2px;
   margin-bottom: 1em;
   cursor: pointer;
   font-weight: 500;

}

.cnotice a {

   color: inherit;

} .cnotice a:hover {

   color: inherit;
   text-decoration: underline;

}

/* Sets the minimum banner height. If img + logo-container margins > height. Banner will be larger*/

cnotice-main {

   display: table;
   width: 100%;
   height: 80px; /* need to set height for height 100% to work on elements within it */

}

/*MOBILE - Adjust mobile height of banner*/ body.skin-minerva #cnotice-main {

   height: 100px;

}

/*IMPORTANT - don't touch*/ .cnotice-message-container, .cnotice-logo-container, .cnotice-misc-container {

   display: table-cell;
   height: 100%;
   vertical-align: middle;

}

/* --- Main message --- */ .cnotice-message {

   position: relative;
   margin: 0;
   line-height: 1.2;
   padding: 5px 5px 5px 5px;

}

@media (min-width: 1200px) {

   .cnotice-message {
       padding: 15px 0px 11px 30px;
   }

}

body.rtl .cnotice-message {

   padding: 5px 5px 5px 5px;

}

.cnotice-message p {

   margin: 0;
   font-family: Arial, sans-serif;
   font-weight: bold;
   font-size: 100%;
   opacity: 1;
   text-align: center;
   padding-top: 10px;
   padding-bottom: 10px;

}

@media (min-width: 1200px) {

   .cnotice-message p { font-size: 120%; }

}

/* --- Logo Image text --- */ .cnotice-logo-container {

   width: 10%;

}

body.rtl .cnotice-logo-container {

   padding: 0 .25em 0 .9em;

}

.cnotice-logo-container img {

   opacity: 1;
   display: block;
   margin-left: 15%;
   margin-top: 2px;
   margin-bottom: 1px;

}

/*Misc containter stuff starts here*/ .cnotice-misc-container {

   width: 10%;
   padding-right: 40px;

}

/*Detects and adjusts for mobile skin */ body.skin-minerva .cnotice-misc-container {

   padding-right: 10px;

}

/* --- Close Options --- */

cnotice-toggle-box-options {

   display: table-cell;
   font-size: .8em;
   text-transform: uppercase;
   width: 38px;
   height: 38px;
   border-radius: 19px;
   vertical-align: middle;

}

cnotice-toggle-box {

   cursor: pointer;
   position: absolute;
   top: 2px;
   right: 3px;
   z-index: 1;
   opacity: .8;

}

body.rtl #cnotice-toggle-box {

   left: 3px;
   right: unset;

}

cnotice-toggle-box:hover {

   opacity: 1;

}

cnotice-toggle-icon{

   background: 
      linear-gradient(transparent,transparent),
      url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eclose%3C/title%3E%3Cpath d=%22M4.34 2.93l12.73 12.73-1.41 1.41L2.93 4.35z%22/%3E%3Cpath d=%22M17.07 4.34L4.34 17.07l-1.41-1.41L15.66 2.93z%22/%3E%3C/svg%3E");
   height: 100%;
   width: 17px;
   min-width: 17px;
   min-height: 17px;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   opacity: 0.8;

}

cnotice-toggle-icon:hover {

   opacity: 1;

}

/* --- Full Banner Link --- */ .cnotice a.cnotice-full-banner-click {

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

}

.cnotice a.cnotice-full-banner-click:hover {

   text-decoration: underline;

}

.cnotice-button {

   display: inline-block;
   border: 2px solid #36c;
   border-radius: 2px;
   color: #fff;
   padding: 5px 5px;
   text-align: center;
   font-weight: bold;
   text-decoration: none;
   font-size: 14px;
   margin: 4px 2px;
   -moz-transition-duration: 100ms; /* Firefox */
   -webkit-transition-duration: 100ms; /* Safari */
   transition-duration: 100ms;
   cursor: pointer;
   z-index: 1;
   min-width: 80px;

}

@media (min-width: 1100px) {

   .cnotice-button {
       min-width: 110px;
       width: 25%;
       margin: auto;
   }

}

/* --- Buttons --- */ .cnotice a.cnotice-buttonlink {

   cursor: pointer;
   text-decoration: none;
   color: #000;

}

.cnotice a.cnotice-buttonlink:hover {

   color: #fff;

}

.cnotice-button1 {

   background-color: #36c;
   border-color: #36c;
   color: #fff;

}

.cnotice-button1:hover {

   background-color: #447ff5;
   border-color: #447ff5;

}

.cnotice-button1:active {

   background-color: #2a4b8d;
   border-color: #2a4b8d;

}

.rtl .cnotice-button1 {

   left: 23px;
   right: auto;
   margin-left: 20px;

}

cnotice-translation-link {

   position: absolute;
   right: 65px;
   bottom: 0px;
   font-size: 0.8em;
   white-space: nowrap;

}

cnotice-translation-link:hover {

   text-decoration: underline;

}

.rtl #cnotice-translation-link {

   text-align: left;
   left: 65px;

}

/* --- Dark mode --- */ html.skin-theme-clientpref-night .cnotice {

   color: #eaecf0;
   background: #202122;
   border-color: #72777d;

} html.skin-theme-clientpref-night #cnotice-toggle-box {

   filter: invert(1);

}

@media (prefers-color-scheme: dark) {

   html.skin-theme-clientpref-os .cnotice {
       color: #eaecf0;
       background: #202122;
       border-color: #72777d;
   }
   html.skin-theme-clientpref-os #cnotice-toggle-box {
       filter: invert(1);
   }

} </style>

   <a class="cnotice-full-banner-click external text" href="//meta.wikimedia.org/wiki/Meta:Example">

               <img src="//upload.wikimedia.org/wikipedia/commons/8/81/Wikimedia-logo.svg" alt="Banner logo" width="55px" height="55px">

ONE LINE OF TEXT. IDEALLY BETWEEN 50-70 CHARACTERS

   </a>

       <a href="#" title="Hide" onclick="mw.centralNotice.hideBanner();return false;">

       </a>