MediaWiki:Centralnotice-template-POTY 2018 R1 New

From Meta, a Wikimedia project coordination wiki
Jump to navigation Jump to search

<style>

/* Inline banner styles


*/


  1. frb {
   padding: 0;
   width: 100%;
   position: relative;

}

  1. frb>a {
   display: table;
   table-layout: fixed;
   border: 1px solid rgba(0, 0, 0, 0.3);
   background-color: #FFF;
   font-size: 15px;
   font-weight: bold;
   line-height: 1.4;
   text-align: left;
   width: 100%;
   padding: 0;
   height: auto;
   text-decoration: none;
   margin-bottom: 24px;

}

  1. frb>a:hover {
   text-decoration: none;

}

  1. frb,
  2. frb * {
   box-sizing: border-box;

}

  1. frb>a>* {
   display: table-cell;
   vertical-align: middle;
   padding: 0.4em 1em;

}

  1. frb>a .frb-logo {
   width: 18rem;
   height: 98px;

}


  1. frb>a .frb-logo svg {
   width: 67.46px;
   height:80px;
   float: left;
   margin-right: 1rem;

}

  1. frb>a .frb-logo p {
   padding-top: .4em;
   color: #444;

}

  1. frb>a:hover .frb-logo p {
   color: #000;
   text-decoration: underline;

}

  1. frb>a .frb-logo p span {
   display: block;

}

@keyframes scroll {

  100% { background-position: 1000em 50% }

}

  1. frb>a .frb-image {
   background-size: auto 100%;
   background-repeat: repeat-x;
   background-image: url('//upload.wikimedia.org/wikipedia/donate/9/9e/POTYBanner.png');
   background-position: 0 50%;
   animation: scroll 500s infinite linear;
   height: 98px;

}

  1. frb>a:not(:hover) .frb-image {
   animation-play-state: paused;

}

  1. frb .frb-cta .cta-slides {
   position:relative;

}

  1. frb .cta-slide {
   display: flex;
   flex-direction: column;
   justify-content: center;

}

  1. frb .frb-cta .cta-slide:last-child {
   position:absolute;
   top:200%;
   left:0;
   right:0;
   bottom:-200%;

}

@keyframes jump {

   0% {transform: translateY(0)}
   50% {transform: translateY(0)}
   60% {transform: translateY(-200%)}
   100% {transform: translateY(-200%)}

}

  1. frb .frb-cta .cta-slides {
   animation: jump 7s infinite ease-in-out;
   animation-direction: alternate;

}

@media screen and (max-width:719px) {

   #frb>a {
       display: block;
       table-layout: auto;
       height: auto;
   }
   #frb>a>* {
       display: block;
       width: 100%!important;
       min-height: 88px;
       vertical-align: middle;
   }
   #frb>a .frb-logo {
       min-height: auto;
       height: auto ;
   }
   #frb>a .frb-logo p {
       padding-top: 0.5em;
       padding-right: 1.5em;
       padding-bottom: 0.5em;
   }
   #frb>a .frb-logo p span {
       display: inline;
   }

}

/* --- Close button --- */

.frb-inline-close {

   position: absolute;
   top: 0;
   right: 0;
   padding: 8px;
   cursor: pointer;

}

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

   .frb-inline-close {
       padding: 12px;
   }

}

.frb-inline-close .frb-icon-close path {

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

}

.frb-inline-close .frb-icon-close circle {

   fill: rgba(0,0,0,.3);
   stroke: transparent;

}

.frb-inline-close:hover .frb-icon-close path, .frb-inline-close:focus .frb-icon-close path {

   stroke: rgba(255,255,255,1);

}

.frb-icon-close {

   width: 28px;
   height: 28px;

}

.trans-box a { text-align: right; font-size: 0.9em; padding-right: 6px; color: white; white-space: nowrap; text-decoration: none;

       position: absolute;
       z-index: 98;
       bottom: 2px;
       right: 6px;
       background: rgba(0,0,0,0.5);

}

</style>


   <a href="https://commons.wikimedia.org/wiki/Special:MyLanguage/Commons:Picture_of_the_Year/2018" target="_blank">
   </a>
   
       <svg class="frb-icon frb-icon-close" role="img" aria-labelledby="frb-icon-close-title" width="34" height="34" viewBox="0 0 34 34" xmlns="http://www.w3.org/2000/svg"><title id="frb-icon-close-title">Close</title><g transform="translate(1 1)" fill="none" fill-rule="evenodd"><circle stroke="#A2A9B1" fill="#F8F9FA" cx="16" cy="16" r="16"></circle><path d="M10 10l12 12m0-12L10 22" stroke="#36C" stroke-width="3" stroke-linecap="round"></path></g></svg>
   

<script> var frb = frb || {}; $(function() {

   // Close top banner on click or return
   $('.frb-inline-close').on('click keypress', function(e) {
       if (e.which === 13 || e.type === 'click') {
           $('#frb-inline').hide();
           mw.centralNotice.hideBanner();
           e.stopPropagation();
       }
   });
   // Adjustments for mobile
   if ( window.location.href.indexOf('m.wikipedia') > -1 ) {
       $('.frb').addClass('frb--is-mobile');
   }


}); </script>