MediaWiki:Centralnotice-template-wmhackathon17

<style>

  1. centralNotice.collapsed .cn-banner {
   display: none;

}

.cn-banner {

   position: relative;
   overflow: hidden;
   margin-bottom: 1em;
   border: solid 1px #aaaaaa;

}

/* Mobile skin */ body.skin-minerva .cn-banner {

   margin-bottom: 0;

}

.cn-banner a.cn-full-banner-click {

   display: block;
   height: 100%;
   width: 100%;
   cursor: pointer;

} .cn-banner a:hover {

   text-decoration: none;

}

.cn-banner-content {

   display: table;
   box-sizing: border-box;
   padding: 8px 30px 8px 8px;
   width: 100%;

} body.rtl .cn-banner-content {

   padding: 8px 8px 8px 30px;

}

.cn-banner-logo img {

   vertical-align: middle;
   height: 90px;
   width: 500px;

}

@media (min-width: 768px) {

   .cn-banner-logo img {
       height: 90px;
       width: 500px;
   }

}

.cn-banner-text {

   font-size: .9em;
   color: black;
   font-weight: bold;
   line-height: 1.4em;
   text-align: center;

}

@media (min-width: 768px) {

   .cn-banner-text {
       font-size: 1em;
   }
   .cn-banner-text span {
       display: block;
   }

} @media (min-width: 982px) {

   .cn-banner-text {
       font-size: 1.1em;
   }

}

.cn-banner .cn-banner-content:hover {

   text-decoration: underline;

}

  1. cn-toggle-box {
   position: absolute;
   z-index: 98;
   top: 0;
   right: 0;
   opacity: .8;

} body.rtl #cn-toggle-box {

   left: 0;
   right: auto;

}

  1. cn-toggle-box:hover {
   opacity: 1;

}

  1. cn-toggle-box img {
   padding: 6px;

}

  1. cn-banner-translate-link {
   /* Change to display: none; if you don't need translations */
   display: block; 
   position: absolute;
   z-index: 98;
   bottom: 6px;
   right: 6px;
   font-size: 0.9em;
   white-space: nowrap;
   text-align: right;

}

  1. cn-banner-translate-link:hover {
   text-decoration: underline;

}

body.rtl #cn-banner-translate-link {

   left: 6px;
   right: auto;
   text-align: left;

}

/* Translate extension doesn't work well on mobile */ body.skin-minerva #cn-banner-translate-link {

   display: none;

} </style>

<script> $(document).ready(function() {

   /* Show banner */
   if (!mw.centralNotice.bannerData.hideResult) {
       $('.cn-banner').show();
   }

}); </script>