Jump to content

MediaWiki:Centralnotice-template-B16WMDE mob fallback

From Meta, a Wikimedia project coordination wiki

<script type="text/javascript">/*jshint unused: false */

function addCharacterSpans( $elem, startCharacter, endCharacter ) { var text = $elem.text(), i = startCharacter, $newContainer = $( '' ); if ( startCharacter > 0 ) { $newContainer.append( text.substring( 0, startCharacter ) ); } while ( i < endCharacter ) { $newContainer.append( $( '' ).text( text[ i ] ) ); i++; } if ( endCharacter < text.length ) { $newContainer.append( text.substring( endCharacter ) ); } $elem.html( $newContainer.html() ); }

function getNumberOfCharacters( $elem ) { return $elem.text().length; }

function highlightNthCharacter( $elem, n, className ) { $elem.find( 'span:nth-child(' + n + ')' ).addClass( className ); }

function doHighlightStep( step, $elem, highlightClass, numSteps, stepDuration ) { highlightNthCharacter( $elem, step, highlightClass ); if ( step < numSteps ) { setTimeout( function () { doHighlightStep( step + 1, $elem, highlightClass, numSteps, stepDuration ); }, stepDuration ); } } function animateHighlight( $elem, highlightClass, stepDuration, startCharacter, endCharacter ) { startCharacter = startCharacter || 0; endCharacter = endCharacter || getNumberOfCharacters( $elem ); addCharacterSpans( $elem, startCharacter, endCharacter ); doHighlightStep( 0, $elem, highlightClass, $elem.children( 'span' ).length, stepDuration ); }</script> <script type="text/javascript">window.GlobalBannerSettings = { 

   "goalSum": 8600000,
   "donations-date-base": "2016-12-28",
   "donations-collected-base": 8100000,
   "donators-base": 392840,
   "appr-donations-per-minute": 100,
   "appr-donators-per-minute": 7,
   "milion-impressions-per-day": 8,
   'allBannersCookie': 'banner_impression_count',
   'singleBannerCookie': 'single_banner_impression_count',
   'campaign-start-date': '2016-11-09',
   "banner-close-track-ratio": 1,

};</script> <script type="text/javascript">var startDate = '2016-11-09', 

   endDate = '2016-12-31';

function getCampaignDayString() { var daysSinceStart = getDaysSinceCampaignStart() + 1; return daysSinceStart + '.'; }

function dateObjectFromString( dateStr ) { 

       var dateParts = dateStr.split( '-' );
       return new Date( dateParts[ 0 ], dateParts[ 1 ] - 1, dateParts[ 2 ] );

}

function getDaysSinceCampaignStart() { var startDay = dateObjectFromString( startDate ); return Math.floor( new Date( new Date() - startDay ) / 1000 / 60 / 60 / 24 ); }

function getDaysUntilCampaignEnds() { 

    	var endDay = dateObjectFromString( endDate ),
           dayDelta = endDay - new Date();
       if ( dayDelta > 0 ) {
           return Math.floor( dayDelta / 1000 / 60 / 60 / 24 );
       } else {
           return 0;
       }

}

function getCampaignDaySentence() { 

       if ( getDaysUntilCampaignEnds() == 0 ) {
               return 'Heute ist der letzte Tag unserer Spendenkampagne.';
       } else if ( getDaysUntilCampaignEnds() < 7 ) {
               return 'Dies ist die letzte Woche unserer Spendenkampagne.';
       } else if ( getDaysSinceCampaignStart() > 0 ) {

return 'Heute ist der ' + getCampaignDayString() + ' Tag unserer Spendenkampagne.'; } return 'Heute beginnt unsere Spendenkampagne.'; }

function getEnglishCampaignDaySentence() { 

       if ( getDaysUntilCampaignEnds() == 0 ) {
               return 'Today is the final day of our donation campaign.';
       } else if ( getDaysUntilCampaignEnds() < 7 ) {
               return 'This is the last week of our donation campaign.';
       }

return ; } </script> <script type="text/javascript">/*jshint unused: false */

var customDayNames = { '06.12': { de: 'Nikolaustag', en: 'St Nicholas Day' }, '24.12': { de: 'Weihnachtsfeiertag', en: 'Christmas Day' }, '25.12': { de: '1. Weihnachtsfeiertag', en: 'Christmas Day' }, '26.12': { de: '2. Weihnachtsfeiertag', en: 'Christmas Day' } };

function getDateString( date ) { var dateString = , day = date.getDate(), month = date.getMonth() + 1; if ( day < 10 ) { dateString += '0'; } dateString += day; dateString += '.'; if ( month < 10 ) { dateString += month; } dateString += month; return dateString; }

function getCurrentDayName( fallbackFunction, lang ) { var currentDateString = getDateString( new Date() ), language = lang || 'de'; if ( currentDateString in customDayNames ) { return customDayNames[ currentDateString ][ language ]; } return fallbackFunction(); }</script>

<style> /* Clearfix */

  1. frbanner .cf:before,
  2. frbanner .cf:after {
   content: "";
   display: table; }
  1. frbanner .cf:after { clear: both; }

.ie7 #frbanner .cf { zoom: 1; }


/* Border-Box */

  1. frbanner *,
  2. frbanner *:before,
  3. frbanner *:after {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}


  1. frbanner {
   top: 0 !important;
   width: 100%;
   display: none;

}

  1. frbanner-mask {
   position: fixed;
   z-index: 1000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #000;
   opacity: 0.8;

}


/* frbanner-window Styles

*/

  1. frbanner-window {
   background: #ffffff url(//upload.wikimedia.org/wikipedia/donate/c/c0/Information-icon.png) no-repeat 10px 8px;
   width: 90%;
   top: 20px !important;
   left: 5% !important;
   -moz-box-shadow:    0 0 10px rgba(90,97,98,.25);
   -webkit-box-shadow: 0 0 10px rgba(90,97,98,.25);
   box-shadow:         0 0 10px rgba(90,97,98,.25);
   position: absolute;

}

@media (min-width : 330px) { #frbanner-window { width: 90%; left: 5% !important; }} @media (min-width : 370px) { #frbanner-window { width: 92%; left: 4% !important; }} @media (min-width : 570px) and (min-aspect-ratio: 13/9) { #frbanner-window { width: 94%; left: 3% !important; }} @media (min-width : 640px) and (min-aspect-ratio: 13/9) { #frbanner-window { width: 94%; left: 3% !important; }} @media (min-width : 650px) and (max-aspect-ratio: 13/9) { #frbanner-window { width: 60%; left: 20% !important; top: 40px !important;}} @media (min-width : 650px) and (min-aspect-ratio: 13/9) { #frbanner-window { width: 80%; left: 10% !important; top: 100px !important;}}

  1. frbanner-close {
   background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
   width: 20px;
   height: 21px;
   display: block;
   cursor: pointer;
   position: absolute;
   right: 10px;
   top: 10px;
   opacity: .6;
   text-indent: -99999px;
   z-index: 999;

}

@media (min-width : 370px) { #frbanner-close { width: 15px; height: 16px; background-size: 75%; right: 5px; top: 5px; } } @media (min-width : 570px) { #frbanner-close { width: 20px; height: 21px; background-size: 100%; right: 10px; top: 10px;} }


  1. frbanner-close:active {
   opacity: 1;

}


/* --- Branding --- */

.frbanner-logo { 

   width: 60%;
   margin: 0 20% 10px;
   text-align: center;

}

@media (min-width : 650px) { .frbanner-logo { margin-bottom: 20px; }}

.frbanner-logo img { 

   width: 110px;
   opacity: .4;

}

@media (min-width : 330px) { .frbanner-logo img { width: 132px; }} @media (min-width : 370px) { .frbanner-logo img { width: 110px; }} @media (min-width : 490px) { .frbanner-logo img { width: 132px; }}


/* --- Message --- */

  1. frbanner-window .frbanner-message {
   text-align: left;
   padding: 15px;
   font: .8em/1.1em "Helvetica Neue Light",Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 200;
   color: #3c3c3c;

}

  1. frbanner2 {
   font-size: 0.8em;
   line-height: 1em;

}

@media (min-width : 768px) { 

   #frbanner2 {
       font-size: 1em;
       line-height: 1.3em;
   }

}

@media (min-width : 330px) { #frbanner-window .frbanner-message { padding: 20px; font-size: .95em; line-height: 1.4em; } } @media (min-width : 370px) and (min-aspect-ratio: 13/9) { #frbanner-window .frbanner-message { padding: 15px; width: 63%; float: left; font-size: .75em; line-height: 1.4em; } } @media (min-width : 570px) and (min-aspect-ratio: 13/9) { #frbanner-window .frbanner-message { padding: 20px; width: 65%; float: left; font-size: .9em; line-height: 1.4em; } } @media (min-width : 650px) and (max-aspect-ratio: 13/9) { #frbanner-window .frbanner-message { padding: 30px; font-size: 1.15em; line-height: 1.4em; } } @media (min-width : 650px) and (min-aspect-ratio: 13/9) { #frbanner-window .frbanner-message { padding: 30px; width: 66%; float: left; font-size: 1.2em; line-height: 1.4em; } }


  1. frbanner-window .frbanner-message p { margin-bottom: .5em; }
  1. frbanner-window .frbanner-message p:last-child { margin-bottom: 0; }
  1. frbanner-window .frbanner-message strong {
   font-family: "Helvetica Neue Bold",Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 600;

} /* --- Dynamic highlighting --- */

  1. frbanner .highlight,
  2. mini-highlight .highlight {
   background-color: yellow;
   color: black;
   font-weight:normal;

}

  1. to-highlight span:first-child { padding-left:5px; }
  2. to-highlight span:last-child { padding-right:5px; }
  1. frbanner-window .frbanner-message .highlight { line-height: 1.2; }


/* --- Static highlighting --- */

  1. frbanner-window span#btext-highlight {
   background-color: yellow;
   padding: 0px 5px;

}

  1. frbanner2 #mini-highlight {
   background-color: yellow;
   color:#040931;
   padding: 0px 5px;

}

/* --- Form --- */

  1. frbanner-form {
   background: #e2e2e2;
   padding: 10px 15px 10px;
   position: relative;

}

@media (min-width : 330px) { #frbanner-form { padding: 15px 20px 10px; } } @media (min-width : 370px) and (min-aspect-ratio: 13/9) { #frbanner-form { padding: 20px 15px 15px; width: 37%; float: right; height: 250px; }} @media (min-width : 570px) and (min-aspect-ratio: 13/9) { #frbanner-form { padding: 30px 20px 20px; width: 35%; float: right; height: 290px; }} @media (min-width : 650px) and (max-aspect-ratio: 13/9) { #frbanner-form { padding: 30px; } } @media (min-width : 650px) and (min-aspect-ratio: 13/9) { #frbanner-form { padding: 30px; width: 34%; float: left; height: 435px; } }


  1. frbanner-form:before {
   height: 0;
   width: 0;
   margin-left: -10px;
   content: " ";
   position: absolute;
   left: 50%;
   top: 0;
   border-color: rgba(255, 255, 255, 0);
   border: solid transparent;
   pointer-events: none;
   border-top-color: white;
   border-width: 10px;

}

@media (min-width : 370px) and (min-aspect-ratio: 13/9) { 

   #frbanner-form:before  {
       border-left-color: white;
       left: 0;
       top: 50%;
       margin: 0;
       border-color: rgba(255, 255, 255, 0);
       border: solid transparent;
       pointer-events: none;
       border-left-color: white;
       border-width: 10px;
   }}

.frbanner-amounts, .frbanner-submit { 

   width: 100%;
   overflow: auto;
   zoom: 1;
   margin: 0 auto;
   padding: 0;

}

.frbanner-amounts { margin-bottom: 10px; }

@media (min-width : 370px) { .frbanner-amounts { margin-bottom: 12px; }} @media (min-width : 570px) { .frbanner-amounts { margin-bottom: 15px; }} @media (min-width : 650px) { .frbanner-amounts { margin-bottom: 30px;} }

.frbanner-amounts li { 

   display: block;
   width: 32%;
   float: left;
   clear: none;
   margin: 0 2% 6px 0;

}

@media (min-width : 370px) and (min-aspect-ratio: 13/9) { .frbanner-amounts li { width: 48%; /*margin-right: 4%;*/} } @media (min-width : 650px) { .frbanner-amounts li, .frbanner-submit li { margin-bottom: 6px; } }


.frbanner-amounts li:last-child, .frbanner-submit li:last-child { margin-right: 0; }

@media (max-aspect-ratio: 13/9) { .frbanner-amounts li#amount_total_3, .frbanner-amounts li#amount_total_6 { margin-right: 0; }} @media (min-aspect-ratio: 13/9) { .frbanner-amounts li#amount_total_2, .frbanner-amounts li#amount_total_4 { margin-right: 0; }}

.frbanner-amounts li#amount_total_5, .frbanner-amounts li#amount_total_6 { 

   margin-bottom: 0;

}

@media (max-aspect-ratio: 13/9) { .frbanner-amounts li#amount_total_4 { margin-bottom: 0; }}

/*.frbanner-submit li { width: 100%; margin-right: 0%;}

/* Stack in landscape */ @media (min-aspect-ratio: 13/9) { 

   .frbanner-submit .pm-all, {
       margin-bottom: 6px; margin-right: 0; width: 100%;
   }

}*/

.frbanner-submit ol { 

   display: table;
   table-layout: fixed;
   width: 100%;

} .frbanner-submit li { 

   display: table-cell;
   padding-right: 2%;
   float: left;
   vertical-align: top;
   margin-right: 0px;
   margin-bottom: 6px;
   width: 50%

}

@media (min-aspect-ratio: 13/9) { 

  .frbanner-submit li { width: 100%; }

}

.pm-sms, .pm-sms-hint { 

   width: 100% !important;

}

.pm-sms-hint { 

   font-size: 9pt;
   line-height: 12pt;

}

@media (min-aspect-ratio: 13/9) { .frbanner-submit .pm-sms, .pm-sms-hint { margin-bottom: 4px; margin-right: 0; width: 100% !important; }} @media (min-width : 650px) { .frbanner-submit .pm-sms { margin-bottom: 6px; } }


li.subhead { 

   width: 100%;
   margin: 0;
   text-align: center;
   font-size: 9px;
   text-transform: uppercase;
   color: #7c7c7c;

}

@media (min-width : 330px) { li.subhead { font-size: 10px; }} @media (min-width : 370px) { li.subhead { font-size: 9px; }} @media (min-width : 570px) { li.subhead { font-size: 10px; }} @media (min-width : 650px) { li.subhead { font-size: 13px; margin-bottom: 5px; } }

.frbanner-amounts li input[type="radio"] { 

   /* Based on http://jqueryui.com/button/#radio */
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;

}

.frbanner-amounts li label { 

   display: block;
   width: 100%;
   height: 32px;
   padding: 5px;
   font: 1.1em/22px "Helvetica Neue Roman", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 300;
   text-align: center;
   background: #367fb4;
   border:none;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;
   color: #fff;
   cursor: pointer;
   outline: 0;
   backface-visibility: hidden;

}

@media (min-width : 330px) { .frbanner-amounts li label { height: 32px; font-size: 1.2em; line-height: 24px; }} @media (min-width : 370px) { .frbanner-amounts li label { height: 22px; font-size: 0.9em; line-height: 14px; }} @media (min-width : 570px) { .frbanner-amounts li label { height: 22px; font-size: 0.9em; line-height: 14px; }} @media (min-width : 650px) { .frbanner-amounts li label { height: 40px; font-size: 1.3em; line-height: 32px; }}

.frbanner-amounts li label:active , .frbanner-amounts li input[type="radio"]:checked + label, .frbanner-amounts li input[type="radio"].checked + label { 

   background: #0f4b76;

}

@media (max-width : 680px) { 

   .frbanner-amounts#amount_total_6 label { font-size: 1.2em; }

}

/* -- Other amount box -- */

  1. input_amount_other_box {
   padding: 0;
   margin: 0;
   background: #fff;
   border: none;
   width: 80%;
   font-size: 0.8em;

} .frbanner-amounts li input[type="radio"]:checked + label #input_amount_other_box { 

   background: #fff;

}

  1. frbanner-window li.frbanner-submit {
   display: block;
   margin:0;

}

  1. frbanner-window .a-sms,
  2. frbanner-window button {
   background-repeat: no-repeat;
   background-position: center center;
   background-size: 80%;
   border: none;
   width: 100%;
   height: 32px;
   padding: 5px;
   line-height: 1;
   font-size: .8em;
   text-transform: uppercase;
   color: white;
   cursor: pointer;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;

}

  1. frbanner-window .a-sms{
   display: block;
   text-align: center;
   vertical-align: middle;
   line-height: 32px;
   padding: 0px;

}

  1. frbanner-window .a-sms:hover{
   text-decoration: none;

}

@media (min-width : 330px) { #frbanner-window .a-sms, #frbanner-window button { height: 40px; line-height: 1.2; }} @media (min-width : 370px) { #frbanner-window .a-sms, #frbanner-window button { height: 24px; line-height: 1.2; }} @media (min-width : 570px) { #frbanner-window .a-sms, #frbanner-window button { height: 32px; line-height: 24px; }} @media (min-width : 800px) { #frbanner-window .a-sms, #frbanner-window button { height: 48px; /*font-size: 1.1em;*/; font-size: .9em; line-height: 1.2; background-size: 60%; }}

@media (min-width : 330px) { #frbanner-window .a-sms { line-height: 40px;}} @media (min-width : 370px) { #frbanner-window .a-sms { line-height: 24px;}} @media (min-width : 570px) { #frbanner-window .a-sms { line-height: 32px;}} @media (min-width : 800px) { #frbanner-window .a-sms { line-height: 48px;}}

/*-- New button styles -- */

  1. frbanner-window .a-sms,
  2. frbanner-window button {
   background-color: #e7e7e7;
   -moz-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   color: #367fb4;

}

  1. frbanner-window button:active {
   background-color: #f9f9f9;
   -moz-box-shadow:    0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   box-shadow:         0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;

}

  1. frbanner-window .pm-all button, {
   text-indent: -99999px;

}

  1. frbanner-window .pm-ideal button { text-transform: none; }


/* progress bar */

  1. donationMeterWrapper {
   position: relative;
   margin-bottom: 15px;

}

  1. donationMeter {
   margin: 0 auto;
   height: 40px;
   background: #ff4d22;
   border-radius: 8px;

}

  1. donationFill {
   position: absolute;
   display: block;
   top: 0;
   left: 0;
   width: 0;
   height: 40px;
   background: #257eb0;
   border-top-left-radius: 8px;
   border-bottom-left-radius: 8px;

}

  1. pbarTip {
   position: absolute;
   right: 0;
   height:40px;
   width: 2px;
   background-color: white;

}

  1. daysLeft {
   display: none;
   font-size: 16pt;
   color: white;
   font-weight: bold;
   line-height: 40px;
   position: absolute;
   padding-left: 5px;

}

  1. donationTooltipArrow {
   display: none;
   border-bottom: 10px solid #ff4d22;
   border-left: 10px solid transparent;
   border-right: 10px solid transparent;
   height: 0;
   left: 180px;
   position: relative;
   top: 41px;
   width: 0;
   z-index: 1100;

}

  1. donationTooltip {
   display: none;
   background-color: #ff4d22;
   border-radius: 10px;
   box-shadow: 1px 1px 1px #888888;
   color: #ffffff;
   font-size: 17px;
   font-weight: bold;
   left: 70px;
   padding: 5px 10px;
   position: relative;
   text-align: center;
   top: 41px;
   width: 240px;
   z-index: 1100;

} /* -- Smallprint -- */

  1. frbanner-window #frbanner-smallprint {
   width: 100%;
   font-size: 75%;
   padding: 5px 20px;
   background: #e2e2e2;

}


/* Bottom "reminder" banner styles

*/

  1. frbanner2 {
   width: 100%;
   position: fixed;
   left: 0;
   top: 0;
   cursor: pointer;
   text-align: center;
   z-index: 1000;
   display: none;

} /*#frbanner2 * { 

   -webkit-transition: all .3s ease-in-out;
   -moz-transition:    all .3s ease-in-out;
   -o-transition:      all .3s ease-in-out;
   -ms-transition:     all .3s ease-in-out;
   transition:         all .3s ease-in-out;

}*/

  1. frbanner2 .frbanner2-tab {
   background: #040931;
   width: 280px;
   margin: 0 auto;
   padding: 0 .8em 0.3em .8em;
   display: block;
   position: relative;
   top: 0;
   -moz-border-radius:    0 0 4px 4px;
   -webkit-border-radius: 0 0 4px 4px;
   border-radius:         0 0 4px 4px;
   font-size: .9em;
   color: #fff;
   font-weight: bold;
   cursor: pointer;

}

  1. frbanner2 .frbanner2-tab img {
   float: left;
   margin: .4em .15em 0 0em;
   transform: rotate(180deg);

}

  1. frbanner2 p {
   background: #040931;
   padding: .7em;
   margin: 0;
   font-size: .8em;
   line-height: 1.4em;
   color: #fff;
   text-align: center;

}

  1. frbanner2-close {
   background: url('//upload.wikimedia.org/wikipedia/commons/c/c7/Close-trilogy-white.png') no-repeat center center;
   width: 1em;
   height: 1em;
   background-size: contain;
   float: right;
   display: block;
   cursor: pointer;
   text-indent: -99999px;
   z-index: 999;
   margin-left: 0.5em;

}

.frbanner_disclaimer a, .frbanner_disclaimer a:hover { 

   font-size: 9pt;
   line-height: 14pt;
   color: #000000;
   text-decoration: none;

}

  1. frbanner-window .frbanner-message {
   padding-top: 25px;

}

  1. donationGoalLabel {
   text-align: center;
   text-transform: uppercase;
   color: rgb(170, 170, 170);
   font-size: 11pt;
   line-height: 11pt;

}

  1. donationGoal {
   text-align: center;
   font-weight: bold;
   font-size: 16pt;
   line-height: 18pt;
   padding-bottom: 10px;

}

  1. frbanner hr {
   background: none repeat scroll 0 0 #ddd;
   border: medium none;
   color: #ddd;
   height: 1pt;

}

@media (min-width : 330px) { 

   #donationGoal { font-size: 1.0em; line-height: 1.1em;}
   #donationGoalLabel { font-size: .7em; line-height: .8em;}
   #daysLeft { font-size: .9em; line-height: 30px; }
   #donationMeter { height: 30px; }
   #donationFill { height: 30px; }
   #donationTooltip { font-size: .7em; line-height: 1.1em; top: 29px; width: 165px }
   #donationTooltipArrow { top: 31px; }

} @media (min-width : 370px) and (min-aspect-ratio: 13/9) { 

   #donationGoal { font-size: 1.0em; line-height: 1.1em;}
   #donationGoalLabel { font-size: .7em; line-height: .8em;}
   #daysLeft { font-size: .9em; line-height: 30px; }
   #donationMeter { height: 30px; }
   #donationFill {height: 30px; }
   #donationTooltip { font-size: .7em; line-height: 1.1em; top: 29px; width: 165px }
   #donationTooltipArrow { top: 31px; }

} @media (min-width : 570px) and (min-aspect-ratio: 13/9) { 

   #donationGoal { font-size: 1.0em;  line-height: 1.1em;}
   #donationGoalLabel { font-size: .7em;  line-height: .8em;}
   #daysLeft { font-size: .9em; line-height: 30px; }
   #donationMeter { height: 30px; }
   #donationFill { height: 30px; }
   #donationTooltip { font-size: .7em; line-height: 1.1em; top: 29px; width: 165px }
   #donationTooltipArrow { top: 31px; }

} @media (min-width : 650px) and (max-aspect-ratio: 13/9) { 

   #donationGoal { font-size: 1.1em;line-height: 1.1em; }
   #donationGoalLabel { font-size: .8em;line-height: .9em; }
   #daysLeft { font-size: 1.0em; line-height: 35px; }
   #donationMeter { height: 35px; }
   #donationFill { height: 35px; }
   #donationTooltip { font-size: .9em; line-height: 1.2em; top: 34px; width: 230px }
   #donationTooltipArrow { top: 36px; }

} @media (min-width : 650px) and (min-aspect-ratio: 13/9) { 

   #donationGoal { font-size: 1.2em; line-height: 1.2em; }
   #donationGoalLabel { font-size: .9em; line-height: .9em; }
   #daysLeft { font-size: 1.0em; line-height: 40px; }
   #donationMeter { height: 40px; }
   #donationFill { height: 40px; }
   #donationTooltip { font-size: .9em; line-height: 1.2em; top: 39px; width: 230px }
   #donationTooltipArrow { top: 41px; }

}

</style>

{{{banner-mini-text}}} 

       <img src="//upload.wikimedia.org/wikipedia/commons/a/a4/Arrow-up-white.png" class="tab-img">Spenden Sie jetzt für Wikipedia

<script>

function debounce( func, wait, immediate ) { 

   var timeout;
   return function() {
       var context = this, args = arguments;
       var later = function() {
           timeout = null;
           if ( !immediate ) func.apply( context, args );
       };
       var callNow = immediate && !timeout;
       clearTimeout( timeout );
       timeout = setTimeout( later, wait );
       if ( callNow ) func.apply( context, args );
   };

};

var lazyResize = debounce( function() { 

   animateProgressBar();

}, 100 ); $( window ).resize( lazyResize );


function addBannerSpace() { 

   var bannerHeight = $( '#frbanner2' ).height();
   $( '#frbanner2' ).css( 'top', 0 - bannerHeight ).show();

   $( '#frbanner2' ).animate( {
       top: 0
   }, 1000 );

   $( '#mw-mf-viewport' ).animate( {
       marginTop: bannerHeight
   }, 1000 );

   $( 'head' ).append( '<style>#mw-mf-viewport .overlay.media-viewer { margin-top: ' + ( 0 - bannerHeight ) + 'px }</style>' );

}

function removeBannerSpace() { 

   $( '#mw-mf-viewport' ).css( { marginTop: '0px' } );
   $( '#mw-mf-viewport .overlay.media-viewer' ).css( 'margin-top', 0 );

}


function initializeDynamicPlaceholderValues() { 

   $("span.donorsValue").html( addPointsToNum( getApprDonatorsRaw() ) );
   $( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) );
   if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) {
     $( '#weekdayPrepPhrase' ).text( 'am heutigen' );
   }
   $( 'span#campaignDaySentence' ).text( getCampaignDaySentence() );
   $( 'span#numDaysLeft' ).text( getDaysRemaining() );
   $( '.bannerImpressions').text( window.GlobalBannerSettings[ 'milion-impressions-per-day' ] );

   // Remove this when the meter is more filled and can accomodate the text
   $("#daysLeft").html(  );

}

$(document).ready(function() { 

   $('body').prepend($('#centralNotice'));

   initializeDynamicPlaceholderValues();

   setTimeout( addBannerSpace, 5000 );

   var impCount = increaseImpCount();
   $("#impCount").val(impCount);
   var bannerImpCount = increaseBannerImpCount();
   $("#bImpCount").val(bannerImpCount);

   if(wgUserName !== null) $('#wikilogin').val('yes');

   $( ".send" ).click( function( e ) {
       return validateForm();
   });

   // Reset "other box" if they click a different amount
   $('#amount1, #amount2, #amount3, #amount4, #amount5').click(function() {
       $('#input_amount_other_box').val();
   });

   $("#frbanner-close").click(function() {
       // Close only the full-screen
       $("#frbanner").hide();
   });

   $("#frbanner2-close").click(function() {
       $( '#frbanner2' ).hide();
       removeBannerSpace();
       mw.centralNotice.hideBanner();
       if ( Math.random() < 0.01 ) {
       	$( '#pwkExpandTrack' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/banner-closed/{{{BannerName}}}&rec=1' );

} 

       return false;
   });

   $("#frbanner2").click(function() {
       window.scrollTo(0,0);
       $( '#mw-mf-viewport' ).css( { marginTop: 0 } );
       $("#frbanner").show();
       $("#frbanner2").slideToggle();

       if( Math.random() > 0 ) {
           var url = 'https://spenden.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/banner-expanded/{{{BannerName}}}&rec=1';
           $( '#pwkExpandTrack' ).attr( 'src', url );
       }

       animateProgressBar();
       window.setTimeout( function () {
               animateHighlight( $( '#to-highlight' ), 'highlight', 10 );
       }, 3000 );
   });

   // Show page 2 in preview
   var forced = location.search.match(/\bforce=1/);
   if (forced) {
       // Fullscreen banner
       window.scrollTo(0,0);
       $("#frbanner").show();

       animateProgressBar();
       window.setTimeout( function () {
           animateHighlight( $( '#to-highlight' ), 'highlight', 10 );
       }, 3000 );
   } 

   $( '#{{{banner}}}_btn-ppl' ).click( function() {
       if( $( 'input[name=betrag_auswahl]:checked' ).length > 0 ) {
           $( '#{{{banner}}}_zahlweise' ).val('PPL');
           $( '#{{{banner}}}_betrag' ).val( $( 'input[name=betrag_auswahl]:checked' ).val() ); 
           $( '#{{{banner}}}_form' ).submit();
       } else {
           alert( "Bitte wählen Sie einen Spendenbetrag aus." );
       }
   });
   $( '#{{{banner}}}_btn-cc' ).click( function() {
       if( $( 'input[name=betrag_auswahl]:checked' ).length > 0 ) {
           $( '#{{{banner}}}_zahlweise' ).val('MCP');
           $( '#{{{banner}}}_betrag' ).val( $( 'input[name=betrag_auswahl]:checked' ).val() ); 
           $( '#{{{banner}}}_form' ).submit();
       } else {
           alert( "Bitte wählen Sie einen Spendenbetrag aus." );
       }
   });
   $( '#{{{banner}}}_btn-ueb' ).click( function() {
       if( $( 'input[name=betrag_auswahl]:checked' ).length > 0 ) {
           $( '#{{{banner}}}_zahlweise' ).val( 'UEB' );
           $( '#{{{banner}}}_betrag' ).val( $( 'input[name=betrag_auswahl]:checked' ).val() );
           $( '#{{{banner}}}_form' ).submit();
       } else {
           alert( "Bitte wählen Sie einen Spendenbetrag aus." );
       }
   });
   $( '#{{{banner}}}_btn-bez' ).click( function() {
       if( $( 'input[name=betrag_auswahl]:checked' ).length > 0 ) {
           $( '#{{{banner}}}_zahlweise' ).val( 'BEZ' );
           $( '#{{{banner}}}_betrag' ).val( $( 'input[name=betrag_auswahl]:checked' ).val() ); 
           $( '#frbanner-form' ).attr( 'action', 'https://spenden.wikimedia.de/donation/new?piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}&form=10h16_Form2_Ticker_Intrvar' );
           $( '{{{banner}}}_address_type' ).val( 'person' );
           $( '#{{{banner}}}_form' ).submit();
       } else {
           alert( "Bitte wählen Sie einen Spendenbetrag aus." );
       }
   });

});


function animateProgressBar() { 

   var donationFillElement = $( "#donationFill" );
   donationFillElement.width( '0px' );

   $( 'div#daysLeft' ).hide();

   var barWidth = $( '#donationMeter' ).width();
   var dTarget = parseInt( "{{{donation-target}}}" );
   var dCollected = getApprDonationsRaw();
   if( dCollected > ( dTarget ) ) {
       dCollected = dTarget;
   }
   var dRemaining = dTarget - dCollected;
   var widthToFill = (dCollected / dTarget * barWidth) - 3;

   donationFillElement.animate( { width: widthToFill + 'px' }, {
       duration: 2500,
       complete: function () {
           $( 'div#daysLeft' ).show();

           var fillWidth = $( 'div#donationFill' ).width();
           var tooltipWidth = $( 'div#donationTooltip' ).width();
           $( '#sumDonations' ).text( addPointsToNum( dRemaining ) );
           $( 'div#donationTooltip' ).css( 'left', ( fillWidth - tooltipWidth / 2 ) + 'px' ).show();
           $( 'div#donationTooltipArrow' ).css( 'left', ( fillWidth - 11 ) + 'px' ).show();

           var dFill = donationFillElement.width();
           var pFill = dFill / barWidth;
           var vRem = dRemaining / 1000000;

           vRem = vRem.toFixed( 1 );
           vRem = vRem.replace( ".", "," );

           $( "#valRem" ).html( vRem );
       }
   } );

}

function getDaysRemaining() { 

   daysRemaining = Math.floor( new Date( new Date( 2016, 0, 1, 5, 0, 0 ) - new Date() ) / 1000 / 60 / 60 / 24 );
   return ( daysRemaining > 1 ) ? daysRemaining + " Tage" : "1 Tag";

}

function getSecsPassed() { 

   var startDate =  window.GlobalBannerSettings['donations-date-base'];
   var parts = startDate.split( '-' );
   var startDateObj = new Date( parts[0], parts[1] - 1, parts[2] );
   return Math.floor( ( new Date() - startDateObj ) / 1000 );

}

function getApprDonationsRaw( rand ) { 

   var startDonations = parseInt( window.GlobalBannerSettings['donations-collected-base'], 10 );

   var secsPast = getSecsPassed();

   return startDonations + getApprDonationsFor( secsPast, rand );

}

function getApprDonatorsRaw( rand ) { 

   var startDonators = parseInt( window.GlobalBannerSettings['donators-base'], 10 );

   var secsPast = getSecsPassed();

   return startDonators + getApprDonatorsFor( secsPast, rand );

}

function getApprDonationsFor( secsPast, rand ) { 

   var apprDontionsMinute = parseFloat( window.GlobalBannerSettings['appr-donations-per-minute'] )
   var randFactor = 0;

   if ( rand == true ) {
       randFactor = Math.floor( (Math.random()) + 0.5 - 0.2 );
   }

   return (secsPast / 60 * (apprDontionsMinute * (100 + randFactor)) / 100);

}

function getApprDonatorsFor( secsPast, rand ) { 

   var apprDonatorsMinute = parseFloat( window.GlobalBannerSettings['appr-donators-per-minute'])
   var randFactor = 0;

   if ( rand == true ) {
       randFactor = Math.floor( (Math.random()) + 0.5 - 0.2 );
   }

   return (secsPast / 60 * (apprDonatorsMinute * (100 + randFactor)) / 100);

}


function addPointsToNum( num ) { 

   num = parseInt( num ) + "";
   num = num.replace( /\./g, ',' );
   return num.replace( /(\d)(?=(\d\d\d)+(?!\d))/g, "$1." );

}

function getCurrentGermanDay() { 

   switch ( new Date().getDay() ) {
       case 0:
           return "Sonntag";
       case 1:
           return "Montag";
       case 2:
           return "Dienstag";
       case 3:
           return "Mittwoch";
       case 4:
           return "Donnerstag";
       case 5:
           return "Freitag";
       case 6:
           return "Samstag";
       default:
           return "";
   }

}

function getDateString( date ) { 

   var dateString = , 
       day = date.getDate(),
       month = date.getMonth() + 1;
   if ( day < 10 ) { 
       dateString += '0'; 
   }   
   dateString += day;
   dateString += '.';
   if ( month < 10 ) { 
       dateString += month;
   }   
   dateString += month;
   return dateString;

}


function increaseImpCount() { 

   impCount = parseInt($.cookie('centralnotice_banner_impression_count')) | 0;
   $.cookie('centralnotice_banner_impression_count', impCount + 1, { expires: getCookieExpiryDate(), path: '/' });
   return impCount + 1;

}

function increaseBannerImpCount() { 

   var impCount = 0;

   if($.cookie('centralnotice_single_banner_impression_count')) {
       var impCountCookie = $.cookie('centralnotice_single_banner_impression_count');
       var bannerImpCount = impCountCookie.split("|");
       if(bannerImpCount[0] === '{{{banner}}}') {
           impCount = parseInt(bannerImpCount[1]);
       }
   }
   $.cookie('centralnotice_single_banner_impression_count', '{{{banner}}}|' + (impCount + 1), { expires: getCookieExpiryDate(), path: '/' });
   return (impCount + 1);

}

function getCookieExpiryDate() { 

   var currentDate = new Date();
   return new Date( currentDate.getFullYear() + 1, 0, 1 );

}


function validateForm() { 

   var form = document.donationForm;
   var error = false;

   if($('#interval_multiple').attr('checked') === 'checked') {
       if($('input[name=interval]:checked', form).length !== 1) {
           alert("Es wurde kein Zahlungsintervall ausgewählt.");
           return false;
       } else {
           $('#intervalType').val( "1" );
           $('#periode').val($('input[name=interval]:checked', form).val());
       }
   } else {
       $('#periode').val("0");
   }

   // Get amount selection
   var amount = null;
   for ( var i = 0; i < form.betrag_auswahl.length; i++ ) {
       if ( form.betrag_auswahl[i].checked ) {
           amount = form.betrag_auswahl[i].value;
           break;
       }
   }
   // Check amount is a real number
   error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
   // Check amount is at least the minimum
   if ( amount < 1 || error ) {

       return false;
   } else if ( amount > 99999 ) {

       return false;
   }
   return !error;

} </script>

Retrieved from "https://meta.wikimedia.org/w/index.php?title=MediaWiki:Centralnotice-template-B16WMDE_mob_fallback&oldid=16172871"