MediaWiki:Centralnotice-template-POTY 2022 P2

<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;

}

1. frb2 {

   font-size: xx-small;

}

@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;
       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/2021" target="_blank">

{{{poty2014-text-1}}} {{{fin-text}}}

   </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>
   

<a id="POTY2022P2href" href="//meta.wikimedia.org/wiki/Special:Translate?action=translate&group=Centralnotice-tgroup-POTY_2022_P2"> [Help with translations!]</a>

<script>

 if(document.getElementById("POTY2022P2href")) document.getElementById("POTY2022P2href").setAttribute("href", "//meta.wikimedia.org/wiki/Special:Translate?action=translate&group=Centralnotice-tgroup-POTY_2022_P2&language=" + mw.config.get('wgPageContentLanguage'));

var frb = frb || {};

frb.insertInlineBanner = function() {

   var $inlineBanner = $('#frb-inline');
   if ( window.location.href.indexOf('m.wikipedia') > -1 ) {
       $('.pre-content').prepend( $inlineBanner );
   } else {
       $('#siteNotice').prepend($('#centralNotice'));
   }
   $inlineBanner.css('display', 'block');

};

$(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();
       }
   });

   if (!mw.centralNotice.bannerData.hideResult) {
       frb.insertInlineBanner();
   }

   // Adjustments for mobile
   if ( window.location.href.indexOf('m.wikipedia') > -1 ) {
       $('.frb').addClass('frb--is-mobile');
   }

}); </script>