MediaWiki:Centralnotice-template-read only banner

<style> /* Resets */ .cbnnr * {

   margin: 0;
   padding: 0;

}

.skin-monobook #siteNotice p {

  padding-left: 90px !important;
  padding-right: 64px !important;
  padding-top: 4px !important;

}

/* Box-sizing */ .cbnnr, .cbnnr *, .cbnnr *:before, .cbnnr *:after {

   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

/* Font sizes and line heights */

.cbnnr-message {

   font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
   font-weight: medium;
   font-size: 13px;
   line-height: 1.4;
   color: #555A5F !important;
   text-align: left;

}

.cbnnr-special .cbnnr-message {

   color: #d9e0f5 !important;

}

.cbnnr-headline {

   font-weight: bold;
   color: #000;

} .cbnnr-cta {

   font-size: 13px;
   font-weight: medium;
   color: #222;

}

.cbnnr-special .cbnnr-cta {

   color: white;

}

@media all and (min-width: 720px) {

   .cbnnr-message { 
       font-size: 18px; 
       line-height: 1.5;
    }
   .cbnnr-cta { font-size: 20px; }

}

/* Styles */

.cbnnr {

   background-color: #fff;
   position: relative;
   margin-bottom: 12px;

}

/* Hide banner when Wikipedia site search is enabled */ .overlay-enabled .cbnnr {

   display: none !important;

}

.cbnnr-main {

   position: relative;
   clear: both;
   padding: 10px;
   background-color: white;
   border: 2px solid #FFCC33;
   min-height: 88px;

}

.cbnnr-special .cbnnr-main {

   background-color: #c8ccd1;
   border: none;

}

@media all and (min-width: 720px) {

   .cbnnr-main {
       padding: 15px;
        min-height: 98px;
   }

}

.skin-minerva .cbnnr-main {

       border: none;
       border-bottom: 1px solid #c8ccd1;
   }

@media all and (min-width: 1000px) {

   .skin-minerva .cbnnr-main {
       border: 1px solid #c8ccd1;
       margin-top: 20px;
   }

}

.cbnnr-message {

   display: block;

} .rtl .cbnnr-message {

   text-align:right;

}

.cbnnr-icon {

   width: 68px;
   height: 68px;
   border-radius: 2px;
   overflow: hidden;
   top: 50%;
   position: absolute;
   float: left;
   transform: translateY(-50%);
   left: 10px;
   overflow: hidden;
   background: #fff;

}

@media all and (min-width: 720px) {

   .cbnnr-icon {
      left: 15px;
   }
   .rtl .cbnnr-icon {
      right: 15px;
   }

}

.cbnnr-icon-border {

   border: 1px solid #c8ccd1;

}

.cbnnr-icon img {

   max-width: 100%;
   max-height: 100%;
   position: absolute;
   top: 0;
   left: 0;

}

.cbnnr-icon-border img {

   max-width: 80%;
   max-height: 80%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%,-50%);

}

.cbnnr-message p {

   padding-left: 78px;
   padding-right: 54px;
   padding-top: 5px;
   margin: auto;

} .rtl .cbnnr-message p {

   padding-right: 78px;
   padding-left: 54px;
   padding-top: 5px;
   margin: auto;

}

@media all and (min-width: 720px) {

   .cbnnr-message p  {
      padding-left: 83px;
      padding-right: 64px;
      padding-top: 4px;
   }
   .rtl .cbnnr-message p  {
      padding-right: 83px;
      padding-left: 64px;
      padding-top: 4px;
   }

}

@media all and (max-width: 500px) {

   .cbnnr-message p  {
      padding-left: 5px;
   }
   .rtl .cbnnr-message p  {
      padding-right: 5px;
      padding-left: 0;
   }

   .cbnnr-icon {
      display:none;
   }

}

@media all and (max-width: 501px) {

   .skin-minerva .cbnnr-message p  {
      padding-left: 83px;
   }
   .rtl .skin-minerva .cbnnr-message p  {
      padding-left: 0;
      padding-right: 83px;
   }

   .skin-minerva .cbnnr-icon {
      display:block;
   }

}

@media all and (max-width: 350px) {

   .skin-minerva .cbnnr-message p  {
      padding: 0 5px;
   }

   .skin-minerva .cbnnr-icon {
      display:none;
   }

} .cbnnr-headline, .cbnnr-text {

   display: block;

}

@media all and (min-width: 720px) {

   .cbnnr-headline,
   .cbnnr-text {
       display: inline;
   }
   .cbnnr-text:before {
       content: ' | ';
   }

}

.cbnnr-cta {

   display: block;
   margin-top: 4px;

}

@media all and (min-width: 720px) {

   .cbnnr-cta {
       margin-top: 2px;
   }

}

.cbnnr-cta:hover {

   text-decoration: underline;

}

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

.cbnnr-close {

   cursor: pointer;
   position: absolute;
   top: 50%;
   right: 10px;
   transform: translateY(-50%);
   z-index: 1;
   opacity: .8;
   background: #eaecf0;
   border-radius: 50%;
   padding: 12px;
   width: 44px;
   height: 44px;
   transition: all .3s ease-in-out;  

}

.cbnnr-special .cbnnr-close {

   background: rgba(255,255,255,.5);
   opacity: 1;

}

body.rtl .cbnnr-close {

   left: 10px;
   right: unset;

}

@media all and (min-width: 720px) {

   .cbnnr-close   {
      right: 15px;
   }
   body.rtl .cbnnr-close {
       left: 15px;
       right: unset;
   }

}

.cbnnr-close:hover {

   opacity: 1;

}

.cbnnr-special .cbnnr-close:hover {

   background: rgba(255,255,255,.7);

}

.cbnnr-close-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: 20px;
   min-width: 20px;
   min-height: 20px;
   background-size: contain;
   background-position: center center;
   background-repeat: no-repeat;
   opacity: 0.8;

}

.cbnnr-special .cbnnr-close-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 fill=%22%23ffffff%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");

}

.cbnnr-special .cbnnr-close-icon {

   opacity: 1;

}

.cbnnr-special .cbnnr-close-icon {

   /* need new svg */

}

.cbnnr-close-icon:hover {

   opacity: 1;

}

</style>

       <a href="https://meta.wikimedia.org/wiki/Special:MyLanguage/Tech/Server switch" class="cbnnr-message">

           <figure class="cbnnr-icon">
               <img src="https://upload.wikimedia.org/wikipedia/donate/4/47/Alert_120x120.png" alt="Warning icon"/>
           </figure>

{{{message1}}} 15:00 UTC {{{message2}}}

       </a>

<script> var cbnnr = cbnnr || {};

cbnnr.show = function() {

   $('.cbnnr').css('display', 'block');

};

$(function() {

   if ( !mw.centralNotice.bannerData.hideResult ) {
       cbnnr.show();
   }

}); </script>