MediaWiki:Centralnotice-template-B1617 1117 en6C mob p2 sm refactor

frbanner3 *,
frbanner3 *:before,
frbanner3 *:after {

   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

/* In-article banner styles

*/

frbanner3 {

   display: table;
   position: relative;
   text-align: center;
   background: white;
   color: black;
   font-size: .9em;
   line-height: 1.2;
   position: relative;
   margin: 1em 0 2em;
   border: 5px solid #990000;
   -webkit-transition: all .2s ease-in-out;
   -moz-transition:    all .2s ease-in-out;
   -o-transition:      all .2s ease-in-out;
   -ms-transition:     all .2s ease-in-out;
   transition:         all .2s ease-in-out;

}

html[lang="en"] #frbanner3 {

   font-size: 1em;

}

.frbanner3-message {

   padding: .75em;

}

.frbanner3-form {

   margin-top: 0;
   padding-bottom: .75em;

}

.frbanner3-fields {

   margin: 1em 0 0;
   background: none;
   padding: 0;

}

.frbanner3-fields .frbanner-submit {

   margin: 0;
   padding: 0;

}

/* --- Form legends --- */

frbanner3 legend {

   width: 100%;
   margin: 0 0 .5em;
   text-align: center;
   font-size: .9em;
   font-weight: 500;
   color: #222;
   -webkit-transition: color .2s ease-in-out;
   -moz-transition:    color .2s ease-in-out;
   transition:         color .2s ease-in-out;

}

.frbanner-amounts, .frbanner-submit {

   width: 100%;
   margin: 0 auto;
   padding: 0;

}

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

.frbanner-btn {

   display: block;
   background-color: #f8f9fa;
   color: #222;
   border: 1px solid #9aa0a7;
   border-radius: 2px;
   padding: 1em .5em;
   outline: 0;
   text-align: center;
   line-height: 1;
   cursor: pointer;
   font-family: inherit;
   font-weight: 500;
   transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;

} .frbanner-btn:hover {

   background-color: #fff;
   color: #444;
   border-color: #a2a9b1;

} .frbanner-btn:active {

   background-color: #d9d9d9;
   color: #000;
   border-color: #7d8389;

} .frbanner-btn:focus {

   border-color: #3366cc;
   box-shadow: inset 0 0 0 1px #3366cc;

} .frbanner-btn.checked {

   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

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

   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

.frbanner-submit .frbanner-btn {

   color: #3366cc;

}

.frbanner-submit .frbanner-btn:hover {

   background-color: #fff;
   border-color: #859dcc;

}

.frbanner-submit .frbanner-btn:active {

   background-color: #eff3fa;
   color: #2a4b8d;
   border-color: #2a4b8d;
   box-shadow: none

}

/* --- Amount buttons layout --- */

.frbanner-amounts { margin-bottom: .75em; }

.frbanner-amounts li {

   display: block;
   width: 49%;
   clear: none;
   float: left;
   margin-bottom: 6px;
   margin-right: 2%;

}

body.rtl .frbanner-amounts li {

   float: right;
   margin-right: 0;
   margin-left: 2%;

}

@media (min-width : 570px) { .frbanner-amounts li { margin-bottom: 10px; } }

/* "Phone" layout, 2 amount buttons per row */ @media (max-width: 374px) {

   body.ltr .frbanner-amounts #amount_total_2,
   body.ltr .frbanner-amounts #amount_total_4,
   body.ltr .frbanner-amounts #amount_total_6 {
       margin-right: 0;
   }

   body.rtl .frbanner-amounts #amount_total_2,
   body.rtl .frbanner-amounts #amount_total_4,
   body.rtl .frbanner-amounts #amount_total_6 {
       margin-left: 0;
   }

}

/* "Tablet" layout, 4 amount buttons per row */ @media (min-width: 375px) {

   .frbanner-amounts li {
       width: 31.8333333%;
       margin-right: 1.5%;
   }

   body.rtl .frbanner-amounts li {
       margin-right: 0;
       margin-left: 1.5%;
   }

   body.ltr .frbanner-amounts #amount_total_3,
   body.ltr .frbanner-amounts #amount_total_6 {
       margin-right: 0;
   }

   body.rtl .frbanner-amounts #amount_total_3,
   body.rtl .frbanner-amounts #amount_total_6 {
       margin-left: 0;
   }

}

/* --- Amount buttons appearance --- */

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

}

@media (min-width: 768px) {

   .frbanner-amounts li label {
       font-size: 1.4em;
   }

}

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

   background-color: #2a4b8d;
   border-color: #7d8389;
   color: #fff;

}

.frbanner-amounts li label {

   display: block;
   width: 100%;
   height: 50px;
   padding: 5px;
   line-height: 40px;
   font-size: 1.1em;
   font-style: normal;
   font-weight: normal

}

/* --- Other amount --- */

input_amount_other_box {

   padding: 0;
   margin: 0;
   background: #f8f9fa;
   width: 90%;
   font-size: 0.8em;
   text-align: center;
   direction: ltr;

}

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

   background: #fff;
   border: 1px solid #3366cc;

}

amount_total_6 {

   white-space: nowrap;

}

amount_label_6 {

   background: #f8f9fa;
   border: 1px solid #9aa0a7;
   color: #555;
   padding-left: 0.2em;

}

/* --- Payment method buttons layout --- */

/* Always horizontal */ .frbanner3-fields .frbanner-submit ul {

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

} .frbanner3-fields .frbanner-submit ul li {

   display: table-cell;
   padding: 0 .25em;
   vertical-align: top;

}

/* --- Payment method buttons appearance --- */

.frbanner3-fields .frbanner-submit button {

   width: 100%;
   padding: .5em;
   min-height: 50px;

}

.frbanner-submit .frbanner-btn img {

   display: block;
   margin: 0 auto;
   max-height: 1em;
   max-width: 100%;

}

.frbanner3-fields .frbanner-submit legend, .frbanner3-fields .frbanner-submit button {

   -webkit-transition: all .2s ease-in-out;
   -moz-transition:    all .2s ease-in-out;
   transition:         all .2s ease-in-out;

}

.frbanner3-fields .frbanner-submit.hint legend {

   color: #588fbb;

} .frbanner3-fields .frbanner-submit.hint button {

   box-shadow: 0 0 5px #588fbb;

}

/* --- In-article close options --- */

frbanner3-close-options {

   display: block;
   padding: .2em .5em;
   z-index: 999;
   text-transform: uppercase;
   background: #f2f2f2;
   color: black;

}

.active #frbanner3-close-options {

   display: none;

}

.frbanner3-close,

frbanner3-remind {

   display: inline-block;
   cursor: pointer;
   opacity: .6;
   z-index: 999;
   padding: 0.5em .5em;
   text-transform: uppercase;

}

frbanner3-close-options .frbanner3-close {

  position: absolute;
  right: 8px;
  top: 6px;

}

.frbanner3-close:hover,

frbanner3-remind:hover {

   opacity: 1;

}

frbanner3-close-x {

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

}

frbanner3-close-bottom #frbanner3-close-x {

   float: right;

} body.rtl #frbanner3-close-options .frbanner3-close {

   right: auto;
   left: 8px;

}

frbanner3-close-bottom {

  position: absolute;
  bottom: -2.3em;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: .8em;

}

frbanner3-close-bottom #frbanner3-close-x {

   margin: .2em 0 0 .4em;

}

/* --- In-article remind me later --- */ .frbanner-email-reminder-link {

   font-size: .75em;
   text-transform: uppercase;
   display: inline-block;
   text-decoration: none;
   cursor: pointer;

}

.frbanner-email-reminder-form {

   margin: 1em 0;
   text-transform: none;

}

.frbanner-email-reminder-caption {

   margin-bottom: .5em;

}

frbanner-email-reminder input {

   width: 100%;
   direction: ltr;
   background: #fff;
   width: 100%;
   display: block;
   padding: 0.5em;
   margin: 0;
   font-size: inherit;
   font-family: inherit;
   color: #000;
   border: 1px solid #9aa0a7;
   border-radius: 2px;

}

frbanner-email-reminder input.error {

   border-color: #ff0000;
   box-shadow: inset 0 0 0 0.1em #ff0000

}

frbanner-email-reminder input:focus {

   outline: 0;
   border-color: #3366cc;
   box-shadow: inset 0 0 0 1px #3366cc;

}

frbanner-email-reminder button {

   width: 100%;
   margin-top: .5em;
   padding: .5em;
   color: #fff;
   background-color: #3366cc;
   border-color: #3366cc;

}

frbanner-email-reminder button:hover {

   background-color: #447ff5;
   border-color: #447ff5;

}

frbanner-email-reminder button:active {

   background-color: #2a4b8d;
   border-color: #2a4b8d;
   box-shadow: none;

}

frbanner-email-reminder .smallprint {

   text-align: center;
   text-transform: none;
   margin-top: .5em;
   font-size: .8em;

}

frbanner-email-reminder #errorMessageContainerId {

   text-align: center;
   text-transform: none;
   font-size: .8em;
   color: #ff0000;

}

frbanner-email-reminder .frbanner-email-reminder-done {

   text-transform: none;
   text-align: center;

}

/* --- Smallprint --- */

frbanner3 #frbanner-smallprint {

   width: 100%;
   font-size: 80%;
   margin-top: 2em;
   text-align: center;
   color: #3c3c3c;

}

frbanner3 .recurring-details {

   display: none;

}

.frbanner3-fields, .frbanner3-amounts, .frbanner3-continue {

   margin: 0 .75em 0 .75em;
   background: none;
   padding: 0;

}

/* --- Continue button appearance --- */

.frbanner3-continue button {

   width: 100%;
   margin-top: .5em;
   padding: .5em;
   color: #fff;
   background-color: #3366cc;
   border-color: #3366cc;

} .frbanner3-continue button:hover {

   background-color: #447ff5;
   border-color: #447ff5;
   color: #fff;

} .frbanner3-continue button:active {

   background-color: #2a4b8d;
   border-color: #2a4b8d;
   box-shadow: none;
   color: #fff;

}

@media (min-width: 768px) {

   .frbanner-continue button {
       height: 60px;
       font-size: 1.3em;
   }

}

frbanner3.active {

   position: relative;
   z-index: 2;

} </style>

       
           Maybe later

               <form method="post" action="https://www.pages04.net/wikimedia/remind/Form?sp_source={{{banner}}}">
                   <legend class="frbanner-email-reminder-caption">Send me an email reminder</legend>
                   <input type="hidden" name="formSourceName" value="StandardForm" />
                   <input type="hidden" name="sp_exp" value="yes" />
                   <input type="hidden" name="rml_source" value="{{{banner}}}" />
                   <input type="hidden" name="rml_country" value="" />
                   <input type="hidden" name="rml_language" value="" />
                   <input type="hidden" name="rml_submitDate" value="" />
                   <input type="hidden" name="rml_segment" value="" />
                   <input type="email" name="Email" id="control_EMAIL" label="Email address" placeholder="Email address" class="required" />

                       Please enter a valid email address i.e. name@domain.com

                   <button type="submit">Submit</button>

                       We never sell your information. By submitting, you are agreeing to our donor privacy policy. The Wikimedia Foundation is a nonprofit, tax-exempt organization.
                       We never sell your information. By submitting, you are agreeing to our donor privacy policy and to sharing your information with the Wikimedia Foundation and its service providers in the U.S. and elsewhere. The Wikimedia Foundation is a nonprofit, tax-exempt organization.
                       We never sell your information. By submitting, you are agreeing to our donor privacy policy and to sharing your information with the Wikimedia Foundation and its service providers in the U.S. and elsewhere.

               </form>

                   Thank you! We will send you a reminder email.

       
           <img src="//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg" style="height: 1em;">
           Dear readers in COUNTRY, time is running out in 2016 to help Wikipedia. Our average donation is about %AVERAGE%. If everyone reading this gave %MINIMUM%, we could keep Wikipedia thriving for years to come.

That's right, the price of a cup of coffee is all we need. We're a non-profit with costs of a top ten website. If Wikipedia is useful to you, please take one minute to keep it online and growing. Thank you.

   <form id="frbanner-form" class="frbanner3-form" method="GET" name="paypalcontribution">

           <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" name="utm_key" value="">

           <input type="hidden" name="language" value="">
           <input type="hidden" name="country" value="">
           <input type="hidden" name="currency_code" id="input_currency_code" value="">
           <input type="hidden" name="payment_method" value="">
           <input type="hidden" name="payment_submethod" value="">
           <input type="hidden" name="recurring" value="">
           <input type="hidden" name="gateway" value="">
           <input type="hidden" name="ffname" value="">
           <input type="hidden" name="bannerhistlog" value="">

           <fieldset class="frbanner-submit cf">

               <legend>Select a payment method</legend>

<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('rtbt', 'rtbt_ideal'); return false;"> iDEAL </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('cc'); return false;"> Credit / Debit Card </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('cc-adyen'); return false;"> Credit / Debit Card </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('rtbt', 'rtbt_sofortuberweisung'); return false;"> Online Bank Transfer </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('bt'); return false;"> Bank Transfer </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('cash'); return false;"> Cash </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('paypal'); return false;"> <img src="//upload.wikimedia.org/wikipedia/donate/thumb/8/8d/Paypal-color.svg/320px-Paypal-color.svg.png" alt="PayPal"> </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('amazon'); return false;"> <img src="//upload.wikimedia.org/wikipedia/donate/thumb/e/e4/Amazon-color.svg/320px-Amazon-color.svg.png" alt="Amazon"> </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('obt', 'bpay'); return false;"> BPay </button>
<button class="frbanner-btn" onclick="fundraisingBanner.setPaymentMethod('rtbt', 'rtbt_enets'); return false;"> eNETS </button>
<button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment('paypal', undefined, true); $('#frbanner-window').hide(); return false;"> <img src="//upload.wikimedia.org/wikipedia/donate/thumb/2/22/Paypal-USD-color.svg/320px-Paypal-USD-color.svg.png" alt="PayPal (USD)"> </button>

           </fieldset>

           <fieldset class="frbanner-amounts cf">

               <legend>Select an amount ()</legend>

<input name="amount" type="radio" id="amount1" value="3"> <label id="amount_label_1" for="amount1" class="frbanner-btn">$3</label>
<input name="amount" type="radio" id="amount2" value="15"> <label id="amount_label_2" for="amount2" class="frbanner-btn">$15</label>
<input name="amount" type="radio" id="amount3" value="20"> <label id="amount_label_3" for="amount3" class="frbanner-btn">$20</label>
<input name="amount" type="radio" id="amount4" value="50"> <label id="amount_label_4" for="amount4" class="frbanner-btn">$50</label>
<input name="amount" type="radio" id="amount5" value="100"> <label id="amount_label_5" for="amount5" class="frbanner-btn">$100</label>
<input name="amount" type="radio" id="amountother"> <label id="amount_label_6" onclick="$('#amountother').prop('checked', true);" class="frbanner-btn"> <input type="number" min="0" name="amountGiven" id="input_amount_other_box" placeholder="Other" autocomplete="off" onfocus="$('#amountother').prop('checked', true);"> </label>

           </fieldset>

           <button class="frbanner-btn" onclick="fundraisingBanner.redirectPayment(fundraisingBanner.paymentMethod, fundraisingBanner.paymentSubMethod); return false;">
               Donate now
           </button>

<a href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Problems_donating">Problems donating?</a> | <a href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Ways_to_Give">Other ways to give</a> | <a href="https://wikimediafoundation.org/wiki/Special:LandingCheck?landing_page=FAQ&basic=true">Frequently asked questions</a> | We never sell your information. By submitting, you are agreeing to our donor privacy policy and to sharing your information with the Wikimedia Foundation and its service providers in the U.S. and elsewhere. If you make a recurring donation, you will be debited by the Wikimedia Foundation until you notify us to stop. We’ll send you an email which will include a link to easy cancellation instructions.

   </form>

   
       
           Close

fundraisingBanner.paymentMethod = ; fundraisingBanner.paymentSubMethod = ;

fundraisingBanner.setPaymentMethod = function(method, submethod) {

   fundraisingBanner.paymentMethod = method || 'cc'; // Default to credit card
   fundraisingBanner.paymentSubMethod = submethod || ;
   $(".frbanner3-fields").slideUp();
   $("#frbanner3").addClass("active");
   $(".frbanner3-message .hidden-text").slideDown();
   $(".frbanner3-amounts").slideDown();
   $(".frbanner3-continue").slideDown();

};

fundraisingBanner.showInlineBanner = function() {

// Place frbanner3 in article, before first

or at top var $inArticleBanner = $('#frbanner3'); var $firstParas = $('#mw-content-text > div > p:first-of-type'); if ( $firstParas.length > 0 && !mw.config.get('wgIsMainPage') ) { $firstParas.first().before( $inArticleBanner ); } else { $('#mw-content-text').prepend( $inArticleBanner ); } $('#frbanner3').show(); }; fundraisingBanner.postReminderForm = function() { // Create the iframe for the form and use it as the form's target var frameName = "remindFrame"; var $form = $(".frbanner-email-reminder-form form"); if ($("iframe[name=" + frameName + "]").length == 0) { var $iframe = $('<iframe style="display: none;" name="' + frameName + '"></iframe>'); $form.attr("target", $iframe.attr("name")); $form.after($iframe); } $form[0].submit(); }; fundraisingBanner.getCurrentDate = function() { var today = new Date(); var dd = today.getDate(); var mm = today.getMonth()+1; //January is 0! var yyyy = today.getFullYear(); if(dd<10) { dd='0'+dd; } if(mm<10) { mm='0'+mm; } today = mm+'/'+dd+'/'+yyyy; return today; }; fundraisingBanner.initReminderForm = function() { $(".frbanner-email-reminder-form input[name=rml_country]").val(Geo.country); $(".frbanner-email-reminder-form input[name=rml_language]").val(mw.config.get('wgUserLanguage')); $(".frbanner-email-reminder-form input[name=rml_submitDate]").val(fundraisingBanner.getCurrentDate()); $(".frbanner-email-reminder-form input[name=rml_segment]").val(Math.floor((Math.random() * 100) + 1)); $(".frbanner-email-reminder-link").click(function(e) { $(".frbanner-email-reminder-form").slideToggle(); $('#frbanner-email-reminder').toggleClass('frbanner-email-reminder-active'); $('#control_EMAIL').focus(); e.stopPropagation(); }); $(".frbanner-email-reminder-form button").bind("click", function() { if ( mw.util.validateEmail( $(".frbanner-email-reminder-form form input[name='Email']").val() ) ) { fundraisingBanner.postReminderForm(); $(".frbanner-email-reminder-form form").hide(); $(".frbanner-email-reminder-done").show(); mw.centralNotice.internal.hide.setHideWithCloseButtonCookies(); // Hide future banners for 7 days return false; } else { $(".frbanner-email-reminder-form form input[name='Email']").addClass("error"); $(".frbanner-email-reminder-form #errorMessageContainerId").show(); $('#control_EMAIL').focus(); return false; } }); }; fundraisingBanner.countryNames = { 'US' : 'the U.S.', 'CA' : 'Canada', 'GB' : 'the UK', 'IE' : 'Ireland', 'AU' : 'Australia', 'NZ' : 'New Zealand', 'IT' : 'Italy', 'FR' : 'France' }; $(document).ready(function() { $('.frbanner-replace-country').text( fundraisingBanner.countryNames[Geo.country] ); fundraisingBanner.showInlineBanner(); fundraisingBanner.initReminderForm(); $(".frbanner3-close").click(function(e) { $("#frbanner3").hide(); mw.centralNotice.hideBanner(); e.stopPropagation(); }); $(".frbanner3-message").click(function() { $('.frbanner-submit').addClass('hint'); setTimeout(function () { $('.frbanner-submit').removeClass('hint'); }, 500); }); }); </script>