MediaWiki:Centralnotice-template-peter WMCH dsk sm

<style> /* For IE9 */ @media screen {

   #centralNotice {
      display: block !important;
   }

}

/* Hide when editing */ .action-edit #centralNotice, .ve-activated #centralNotice {

   display: none !important;

}

1. centralNotice.collapsed .frbanner {

   display: none;

}

.frbanner {

   display: none;
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   z-index: 110;
   background: transparent;
   font-family: Arial, Helvetica, Verdana, sans-serif;
   cursor: pointer;

}

.frbanner.nag-reveal {

   position: fixed;
   display: block;
   z-index: 1000;

}

.frbanner.nag-reveal #frbanner-main {

   z-index: 1001;

}

1. frbanner-main {

   display: table;
   width: 100%;
   height: 120px; /* need to set height for height 100% to work on elements within it */

}

.frbanner-message, .frbanner-form-container {

   display: table-cell;
   height: 100%;
   vertical-align: middle;

}

/* --- Main message --- */ .frbanner-message {

   margin: 0;
   padding: 11px 10px 11px 40px;
   background: black url(//upload.wikimedia.org/wikipedia/donate/thumb/9/96/I.svg/40px-I.svg.png) no-repeat;
   background-size: 20px 20px;
   background-position: 10px 10px;
   color: white;
   font-size: 16px;
   line-height: 1.2;
   font-weight: bold;
   text-align: justify;

}

body.rtl .frbanner-message {

   padding: 11px 40px 11px 10px;
   background-position: right 10px top 10px;

}

@media (min-width: 1100px) { .frbanner-message { font-size: 18px; } } @media (min-width: 1200px) { .frbanner-message { line-height: 1.3em; } }

.frbanner-message p {

   margin: 0;

}

.frbanner-greeting {

   font-style: italic;

}

.frbanner-highlight {

   background: #8c8c8c;
   padding: 1px 0;

}

/* --- Form --- */ .frbanner-form-container {

   width: 356px;
   background: white;
   padding: 1.65em .2em .35em .5em;

}

body.rtl .frbanner-form-container {

   padding: 1.65em .5em .35em .2em;

}

.frbanner-form fieldset {

   width: 100%;
   border: 0;
   margin: 0 auto;
   padding: 0 0 .5em 0;

}

.frbanner-form ul {

   display: table;
   width: 100%;
   height: 100%;
   padding: 0;
   list-style: none;
   margin: 0;

}

.frbanner-form legend {

   display: none;
   width: 100%;
   margin: 0;
   padding: 0 0 0.3em 0;
   text-align: center;
   font-size: .9em;
   color: #7c7c7c;

}

/* --- Common Button Styles --- */

.frbanner-btn, a.frbanner-btn {

   display: block;
   padding: .32em .1em;
   border: 1px solid rgba(117, 117, 117, 0.5);
   border-radius: 0.3em;
   background-color: #fff;
   color: #757575;
   font-family: inherit;
   text-align: center;
   text-transform: uppercase;
   line-height: 1;
   font-size: .9em;
   cursor: pointer;
   text-decoration: none;

}

.frbanner-btn:hover {

   background-color: #b8b3b3;
   color: #fff;

}

.frbanner-btn.checked {

   background: #807f7f !important;
   box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
   color: #fff;

}

.frbanner-btn:active {

   box-shadow: inset 0 1px 3px rgba(0,0,0,.5);

}

/* --- Amount Buttons --- */

.frbanner-form .frbanner-amounts ul.line1 {

   margin-bottom: .3em;

}

.frbanner-amounts {

   font-weight: bold;

}

.frbanner-amounts li {

   display: table-cell;
   width: 25%;
   clear: none;
   padding: 0 .4em 0 0;
   vertical-align: top;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

body.rtl .frbanner-amounts li {

   padding: 0 0 0 .4em;

}

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

   position: absolute;
   overflow: hidden;
   height: 1px;
   width: 1px;
   clip: rect(0 0 0 0);
   border: 0;
   margin: -1px;
   padding: 0;

}

.frbanner-amounts label {

   text-transform: none;

}

/* --- Other Amount --- */

1. amount_other .frbanner-btn {

   display: block;
   position: relative;
   padding: .14em 0;
   text-transform: none;

}

1. amount_other span {

   display: inline-block;
   height: auto;
   cursor: pointer;
   font-size: 1em;
   font-weight: bold;

}

1. amount_other input {

   width: 4em;
   display: inline-block;
   background: #a4a4a4;
   border: 0;
   color: #fff;
   padding: .28em .2em;
   -moz-border-radius:    .3em;
   -webkit-border-radius: .3em;
   border-radius:         .3em;
   direction: ltr;
   text-align: center;

}

1. amount_other .checked input {

   background: #fff;
   color: #163348;

}

/* --- Payment method Buttons --- */

/* hide methods which aren't monthly capable when monthly option is selected */ .form-monthly .no-monthly {

   display: none !important;

}

.frbanner-form .frbanner-submit {

   padding-bottom: 0;

}

.frbanner-submit ul {

   display: block;

} .frbanner-submit ul li {

   display: block;
   margin-bottom: .3em;
   padding: 0 .4em 0 0;

}

.frbanner-submit button {

   width: 100%;

}

a.frbanner-btn.paymentmethod-paymentslip {

   margin-right: .4em;

}

/* If wide enough, put in a row. table-layout: fixed; makes them equal widths */ @media (min-width : 960px) {

   .frbanner-submit ul {
       display: table;
       table-layout: fixed;
   }

   .frbanner-submit ul li {
       display: table-cell;
       vertical-align: top;
   }

   body.rtl .frbanner-submit ul li {
       padding: 0 0 0 .4em;
   }

   a.frbanner-btn.paymentmethod-paymentslip {
       margin-top: .3em;
   }

}

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

1. frbanner-close-options {

   display: inline-block;
   position: absolute;
   right: 1em;
   top: .5em;
   z-index: 999;
   font-size: .75em;
   text-transform: uppercase;

}

body.rtl #frbanner-close-options {

   left: 1em;
   right: auto;

}

1. frbanner-close,
2. frbanner-remind {

   display: inline-block;
   cursor: pointer;
   opacity: .5;
   z-index: 999;

}

1. frbanner-close:hover,
2. frbanner-remind:hover {

   opacity: 1;

}

1. frbanner-close-x {

   background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center;
   width: 9px;
   height: 9px;
   float: right;
   display: block;
   margin: .2em .4em;

}

body.rtl #frbanner-close-x {

   float: left;

}

/* --- Legal and smallprint --- */

1. frbanner-legal {

   display: none;
   position: relative;
   margin: 0;
   padding: 5px 40px;
   background: #e2e2e2;
   font-size: 12px;
   line-height: 1.2;
   font-weight: normal;

}

/* --- "Nag" --- */

1. frbanner-nag {

   display: none;
   position: fixed;
   top: 0;
   left: 0;
   color: black;
   background-color: #f36b21;
   padding: 5px;
   width: 100%;
   text-align: center;
   font-size: 17px;
   font-weight: bold;
   box-shadow: 0 0 10px rgba(0,0,0,.5);

}

1. frbanner-nag img {

   margin-right: .4em;
   height: 20px;
   width: 20px;

}

.frbanner-nag-link {

   vertical-align: middle;
   line-height: 26px;

} .frbanner-nag-link:hover {

   text-decoration: underline;

}

1. frbanner-nag button {

   display: inline-block;
   margin: 0 0 0 1em;
   border-radius: .25em;
   background: #ffed41;
   box-shadow: 0 0 5px rgba(6,7,7,.3);
   color: #990000;
   font-size: .8em;
   padding: .25em .5em;
   font-weight: bold;
   cursor: pointer;
   vertical-align: middle;
   border: none;
   text-transform: uppercase;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   transition:         all .25s ease-in-out;

}

1. frbanner-nag button:hover {

   -moz-transform:    scale(1.1);
   -ms-transform:     scale(1.1);
   -webkit-transform: scale(1.1);
   transform:         scale(1.1);

}

.frbanner-nag-close {

   display: block;
   position: absolute;
   top: 0;
   right: 15px;
   width: 15px;
   height: 15px;
   background: url('//upload.wikimedia.org/wikipedia/donate/8/84/Close-dark-trilogy.png') no-repeat center center;
   background-size: contain;
   cursor: pointer;
   opacity: 0.8;
   margin: 10px;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   transition:         all .25s ease-in-out;

}

body.rtl .frbanner-nag-close {

   left: 0;
   right: auto;

}

.frbanner-nag-close:hover {

   opacity: 1;
   -moz-transform:    scale(1.1);
   -ms-transform:     scale(1.1);
   -webkit-transform: scale(1.1);
   transform:         scale(1.1);

} </style>

{{{banner-text-greeting}}} {{{banner-text-main}}} {{{banner-text-thankyou}}}

               
                   Close
                   
               

           <form id="frbanner-donation-form" method="GET" name="donationForm" class="frbanner-form">

               <input type="hidden" name="utm_medium" value="sitenotice">
               <input type="hidden" name="utm_campaign" value="{{{campaign}}}">
               <input type="hidden" name="utm_source" value="{{{banner}}}">

               <input type="hidden" class="paypal-field" name="cmd" value="_donations" />
               <input type="hidden" class="paypal-field" name="business" value="F4T8UMB5PVU9Q" />
               <input type="hidden" class="paypal-field" name="currency_code" value="CHF" />
               <input type="hidden" class="paypal-field" name="lc" value="de" />
               <input type="hidden" class="paypal-field" name="item_name" value="Spende an Wikimedia" />

               <fieldset class="frbanner-amounts cf">
                   <legend>Select an amount ()</legend>

• <input name="amount" type="radio" id="field-amount_total_1" value="5"> <label id="amount_label_1" class="frbanner-btn predefined_amount" for="field-amount_total_1">Fr. 5.-</label>
• <input name="amount" type="radio" id="field-amount_total_2" value="20"> <label id="amount_label_2" class="frbanner-btn predefined_amount" for="field-amount_total_2">Fr. 20.-</label>
• <input name="amount" type="radio" id="field-amount_total_3" value="50"> <label id="amount_label_3" class="frbanner-btn predefined_amount" for="field-amount_total_3">Fr. 50.-</label>

• <input name="amount" type="radio" id="field-amount_total_5" value="100"> <label id="amount_label_5" class="frbanner-btn predefined_amount" for="field-amount_total_5">Fr. 100.-</label>
• <input name="amount" type="radio" id="field-amount_total_6" value="200"> <label id="amount_label_6" class="frbanner-btn predefined_amount" for="field-amount_total_6">Fr. 200.-</label>

•                                Fr. 
                                 <input id="input_amount_other" type="radio" value="Other" name="amount">
                                 <input id="input_amount_other_box" type="text" value="" onfocus="$('#input_amount_other').prop('checked', true);" autocomplete="off" size="3" name="amountGiven">
  

               </fieldset>

               <fieldset class="frbanner-submit cf">
                   <legend>Select a payment method</legend>

• <button class="frbanner-btn paymentmethod-cc"> Credit / Debit Card </button>
• <button class="frbanner-btn paymentmethod-pp"> PayPal </button>

                   <a class="frbanner-btn paymentmethod-paymentslip" href="{{{paymentslip-link}}}">
                       {{{paymentslip-text}}}
                   </a>

               </fieldset>

           </form>

Wikimedia CH, 8008 Zürich IBAN: CH13 0900 0000 85 359089 1. {{{privacy-text}}}

       <img src="//upload.wikimedia.org/wikipedia/donate/thumb/9/96/I.svg/40px-I.svg.png">
       {{{nag-text}}}
       <button class="frbanner-nag-donate">{{{nag-button}}}</button>
       

<script> /** Provides alterImpressionData hook for CentralNotice

*  This info will be sent back with Special:RecordImpression
*/

mediaWiki.centralNotice.bannerData.alterImpressionData = function( impressionData ) {

   // Returning true from this function indicates the banner was shown
   if (mediaWiki.centralNotice.bannerData.hideReason) {
       impressionData.reason = mediaWiki.centralNotice.bannerData.hideReason;
   }
   if (mediaWiki.centralNotice.bannerData.cookieCount) {
       impressionData.banner_count = mediaWiki.centralNotice.bannerData.cookieCount;
   }
   
   return !mediaWiki.centralNotice.bannerData.hideResult;

};

var fundraisingBanner = {};

fundraisingBanner.addSpace = function() {

   if ( $('#{{{banner}}}').is(':visible') ) {
       /* add space for the banner, and extra px if given below. called on load and window resize */
       var extra = 0;
       var bannerHeight = $('#frbanner-main').height();
       $('#mw-panel').css('top', bannerHeight+160+extra);
       $('#mw-head').css('top', bannerHeight+extra);
       $('#mw-page-base').css('margin-top', bannerHeight+extra);
   }

};

fundraisingBanner.show = function() {

   $('body').prepend($('#centralNotice'));
   $('#{{{banner}}}').css('display', 'block');
   fundraisingBanner.addSpace();
   setTimeout(function (){ fundraisingBanner.addSpace(); }, 100);
   setTimeout(function (){ fundraisingBanner.addSpace(); }, 500);
   setTimeout(function (){ fundraisingBanner.addSpace(); }, 1000);
   setTimeout(function (){ fundraisingBanner.addSpace(); }, 5000);

   $(window).resize(function() {
       fundraisingBanner.addSpace();
   });

};

fundraisingBanner.hide = function() {

   /* hide the banner, and remove the extra space which was added for it */
   mw.centralNotice.hideBanner();
   $('#{{{banner}}}').hide();
   $('#mw-panel').css('top', '160px');
   $('#mw-head').css('top', '0px');
   $('#mw-page-base').css('margin-top', '0');
   return false;

};

fundraisingBanner.validateForm = function() {

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

   // Get amount selection
   var amount = $('input[name=amount]:checked').val();
   if( amount === 'Other' ) {
       amount = $('#input_amount_other_box').val();
   }
   // 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;
   }

   // make sure the right field form has the amount
   $('input[name=amount]:checked').val( amount );

   return !error;

};

$(document).ready(function() {

   $( '.paymentmethod-cc' ).click( function() {
       if( fundraisingBanner.validateForm() ) {
           $( '#frbanner-donation-form' ).attr( 'action', '{{{creditcard-link}}}' );
           $( '#frbanner-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
           $( '#frbanner-donation-form' ).submit();
       } else {
           alert( "{{{alert-amount}}}" );
           return false;
       }
   });

   $( '.paymentmethod-pp' ).click( function() {
       if( fundraisingBanner.validateForm() ) {
           $( '#frbanner-donation-form' ).attr( 'action', 'https://www.paypal.com/cgi-bin/webscr' );
           $( '#frbanner-donation-form > input.paypal-field' ).attr( 'disabled', false );
           $( '#frbanner-donation-form' ).submit();
       } else {
           alert( "{{{alert-amount}}}" );
           return false;
       }
   });

   $(".frbanner-amounts .frbanner-btn").click(function() {
       $(".frbanner-amounts .frbanner-btn").removeClass("checked");
       $(this).addClass("checked");
       $('#input_amount_other_box').val(); // Clear "other" box
   });

   $("#amount_other").click(function() {
       document.getElementById("input_amount_other").checked = true;
       $("#input_amount_other_box").focus();
   });

   /* --- Code for sticky "nag" banner --- */
   var nagHoverTimeout;

   $(window).scroll(function() {
       if ($(window).scrollTop() <= 160) {
           $('#frbanner-nag').finish();
           $('#frbanner-nag').hide();
       } else {
           setTimeout(function(){
               if ( !$('.frbanner' ).hasClass('nag-reveal') && $(window).scrollTop() > 160) {
                   $('#frbanner-nag').slideDown();
               }
           }, 1500);
       }
   });

   $('#frbanner-nag').mouseenter(function() {
       nagHoverTimeout = window.setTimeout(function() {
           $('#frbanner-nag').hide();
           $('.frbanner').addClass('nag-reveal');
       }, 2000);
   });

   $('#frbanner-nag').mouseleave(function() {
       window.clearTimeout(nagHoverTimeout);
   });

   $('.frbanner').mouseleave(function(e) {
       if ( $('.frbanner').hasClass('nag-reveal') ) {
           $('.frbanner').removeClass('nag-reveal');
           $('#frbanner-nag').show();
       }
   });

   $('#frbanner-nag').click(function() {
       $('#frbanner-nag').remove();
       window.clearTimeout(nagHoverTimeout);
       window.scrollTo(0,0);
   });

   $('.frbanner-nag-close').click(function(e) {
       $('#frbanner-nag').remove();
       e.stopPropagation();
   });
   /* --- End code for sticky "nag" banner */

   /* --- Code for legal text --- */
   $('.frbanner').mouseenter( function() {
       $('#frbanner-legal').show();
   });
   $('.frbanner').mouseleave( function() {
       $('#frbanner-legal').hide();
   });
   /* --- End code for legal text --- */

   /* Hide banner outside of main namespace (and Main Page, for sites where that isn't in main namespace) */
   if ( mw.config.get('wgNamespaceNumber') > 0 && !mw.config.get('wgIsMainPage') ) {
       mw.centralNotice.bannerData.hideResult = true;
       mw.centralNotice.bannerData.hideReason = 'namespace';
   }

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

}); </script>