Jump to content

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

From Meta, a Wikimedia project coordination wiki

<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;
   cursor: pointer;
   color: #222;
   font-weight: 500;

}

.frbanner * { 

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

}

.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 */
   padding: .25em 0 .25em .25em;

}

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

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

}

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

   margin: 0;
   padding: 5px 10px 5px 30px;
   background-color: #f8f9fa;
   background-image: url("//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg");
   background-repeat: no-repeat;
   background-size: 20px 20px;
   background-position: 5px 6px;
   border: 5px solid #990000;
   border-radius: .5em;
   color: black;
   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;

}

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

   width: 400px;
   background: white;
   padding: 0.1em 1.5em 0.35em 0.5em;
   position: relative;

}

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

   width: 100%;
   margin: 0;
   padding: 0 0 0.3em 0;
   text-align: center;
   font-size: .9em;

}

.frbanner-submit legend { 

   display: none;

}

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

.frbanner-btn { 

   background-color: #f8f9fa;
   border: 1px solid #9aa0a7;
   border-radius: 2px;
   color: #222;
   display: block;
   padding: .32em .1em;
   font-family: inherit;
   font-weight: 500;
   text-align: center;
   line-height: 1;
   font-size: .9em;
   outline: 0;
   cursor: pointer;
   height: 26px;

}

.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-btn.checked:focus { 

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

}

/* --- Frequency Buttons --- */

.frbanner-frequency li { 

   display: table-cell;
   width: 50%;
   padding: 0 .4em 0 0;
   vertical-align: top;

}

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

.frbanner-frequency label { 

   display: block;
   width: 100%;
   font-size: .9em;

}

/* Hide radio buttons */ .frbanner-frequency li input[type="radio"], .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;

}

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

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

   margin-bottom: .3em;

}

.frbanner-amounts { 

   font-weight: bold;

}

.frbanner-amounts li { 

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

}

.frbanner-amounts li#amount_other { 

   width: 25%;

}

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;

}

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

}

  1. amount_other input[type="text"] {
   background-color: #f8f9fa;
   /* border-radius: 0.3em; */
   border: none;
   box-sizing: border-box;
   color: #757575;
   cursor: pointer;
   display: block;
   font-family: inherit;
   font-size: 0.9em;
   height: 24px;
   line-height: 1;
   padding: 0.32em;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   text-align: center;

}

  1. amount_other:hover input[type="text"], #amount_other:hover .checked input[type="text"] {
   background-color: white;
   color: #757575;

}

  1. amount_other .checked input {
   background-color: #2a4b8d;
   border-color: #7d8389;
   color: #fff;

}

.frbanner-amounts #input_amount_other_box:focus { 

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

}

/* --- 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: .4em;
   padding: 0 .4em 0 0;

}

.frbanner-submit button { 

   width: 100%;

}

.frbanner-submit .frbanner-btn img { 

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

}

.frbanner-btn.logo { 

   padding: .2em;

}

/* 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;
       margin: 0;
   }

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

}

.frbanner-submit .frbanner-btn, .frbanner-email-reminder-link.frbanner-btn { 

   color: #3366cc;

}

.frbanner-submit .frbanner-btn:hover, .frbanner-email-reminder-link.frbanner-btn:hover { 

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

}

.frbanner-submit .frbanner-btn:active, .frbanner-email-reminder-link.frbanner-btn:active { 

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

}

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

  1. frbanner-close {
   display: block;
   position: absolute;
   right: .75em;
   top: .25em;
   cursor: pointer;
   opacity: .5;
   z-index: 999;
   width: 13px;
   height: 13px;
   background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center;

}

body.rtl #frbanner-close { 

   left: 1em;
   right: auto;

}

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

}


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

  1. frbanner-legal {
   display: none;
   position: relative;
   margin: 0;
   padding: 5px 40px;
   background: #e2e2e2;
   font-size: 11px;
   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);

}

/* --- Remind me by email --- */

.rml { 

   position: relative;
   width: 100%;
   text-align: center;
   margin-top: .2em;
   padding: .25em .4em 0 0;
   z-index: 999;
   -moz-box-sizing:    border-box;
   -webkit-box-sizing: border-box;
   box-sizing:         border-box;

}

.frbanner-email-reminder { 

   display: none;
   position: absolute;
   padding: 1em;
   top: 2.4em;
   right: 0;
   width: 100%;
   background: #fff;
   border: 1px solid #aaa;
   border-radius: 2px;
   box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15);
   text-transform: none;
   font-size: .9em;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

} body.rtl .frbanner-email-reminder .frbanner-email-reminder-form { 

   right: auto;
   left: 0;

}

.frbanner-email-reminder * { 

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

}

.frbanner-email-reminder-anchor { 

   display: block;
   position: absolute;
   top: -10px;
   left: 50%;
   background-repeat: no-repeat;

}

.frbanner-email-reminder-anchor:before, .frbanner-email-reminder-anchor:after { 

   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-style: solid;
   border-color: transparent;
   border-top: 0;

}

.frbanner-email-reminder-anchor:before { 

   bottom: -10px;
   left: -9px;
   border-bottom-color: #888888;
   border-width: 10px

}

.frbanner-email-reminder-anchor:after { 

   bottom: -10px;
   left: -8px;
   border-bottom-color: #ffffff;
   border-width: 9px;

}

.frbanner-email-reminder input { 

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

} .frbanner-email-reminder input:focus { 

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

} .frbanner-email-reminder input.error { 

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

}

.frbanner-email-reminder .frbanner-btn { 

   width: 100%;
   color: #fff;
   background-color: #3366cc;
   border-color: #3366cc;
   padding: .5em;
   margin-top: .5em;
   font-size: 1em;
   height: auto;

} .frbanner-email-reminder .frbanner-btn:hover { 

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

} .frbanner-email-reminder .frbanner-btn:active { 

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

} .frbanner-email-reminder .frbanner-btn:focus { 

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

}

.frbanner-email-reminder #errorMessageContainerId { 

   color: #ff0000;

} </style>

Dear readers, time is running out in 2016 to help Wikipedia. To protect our independence, we'll never run ads. We're sustained by donations averaging about %AVERAGE%. Only a tiny portion of our readers give. 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: servers, staff and programs. We run on a fraction of what other top sites spend. If Wikipedia is useful to you, please take one minute to keep it online and growing. Thank you. 

           <style>
            /* hide methods which aren't monthly capable when monthly option is selected */
           .form-monthly button.no-monthly {
               display: none !important;
           }
           </style>
           <form id="{{{banner}}}-form" method="GET" name="paypalcontribution" 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" 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-frequency cf">
  • <label class="frbanner-btn frequency_onetime checked" onclick="toggleMonthly(false);"> <input type="radio" name="frequency" id="frequency_onetime" value="onetime" checked="checked" > One-time </label>
  • <label class="frbanner-btn frequency_monthly" onclick="toggleMonthly(true);"> <input type="radio" name="frequency" id="frequency_monthly" value="monthly" > Monthly </label> 
               </fieldset>

               <fieldset class="frbanner-amounts cf">
                   <legend>Select an amount ()</legend>
  • <input name="amount" type="radio" id="field-amount_total_1" value="3"> <label id="amount_label_1" class="frbanner-btn predefined_amount" for="field-amount_total_1">3</label>
  • <input name="amount" type="radio" id="field-amount_total_2" value="5"> <label id="amount_label_2" class="frbanner-btn predefined_amount" for="field-amount_total_2">5</label>
  • <input name="amount" type="radio" id="field-amount_total_3" value="20"> <label id="amount_label_3" class="frbanner-btn predefined_amount" for="field-amount_total_3">20</label>
  • <input name="amount" type="radio" id="field-amount_total_4" value="50"> <label id="amount_label_4" class="frbanner-btn predefined_amount" for="field-amount_total_4">50</label> 
  •                                <input id="input_amount_other" type="radio" value="Other" name="amount">
                               <input id="input_amount_other_box" type="text" value="" placeholder="Other"
                                autocomplete="off" size="3" name="amountGiven">

               </fieldset>

               <fieldset class="frbanner-submit cf">
                   <legend>Select a payment method</legend>
  • <button class="frbanner-btn" onclick="redirectPayment('cc'); return false;"> Credit / Debit Card </button>
  • <button class="frbanner-btn logo" onclick="redirectPayment('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 logo" onclick="redirectPayment('amazon'); return false;"> <img src="//upload.wikimedia.org/wikipedia/donate/thumb/e/e4/Amazon-color.svg/320px-Amazon-color.svg.png" alt="Amazon"> </button> 
               </fieldset>

           </form>

                   Maybe later

       <img src="//upload.wikimedia.org/wikipedia/donate/thumb/9/96/I.svg/40px-I.svg.png">
       If we all gave %MINIMUM%, the fundraiser would be over in an hour.
       <button class="frbanner-nag-donate">Donate now</button>

<script> 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.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() {
       $('.frbanner-email-reminder').toggle();
       $('#control_EMAIL').focus();
   });

   $(".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();
           $(".frbanner-email-reminder").delay(2000).fadeOut(1500);
           mw.centralNotice.hideBanner(); // 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.addNag = function() { 

   var nagHoverTimeout;
   var bannerHeight = $('#frbanner-main').height();

   $(window).scroll(function() {
       if ($(window).scrollTop() <= bannerHeight) {
           $('#frbanner-nag').finish();
           $('#frbanner-nag').hide();
       } else {
           setTimeout(function(){
               if ( !$('.frbanner' ).hasClass('nag-reveal') && $(window).scrollTop() > bannerHeight) {
                   $('#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();
   });

};

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.initReminderForm();

fundraisingBanner.show(); 

   fundraisingBanner.addNag();

}); </script>

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