MediaWiki:Centralnotice-template-B1617 1117 en6C dsk p1 lg refactor v2

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

 #centralNotice {
   display: block !important;
 }

}

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

 display: none !important;

}

/* Clearfix */

.frb .cf:before, .frb .cf:after {

 content: "";
 display: table;

}

.frb .cf:after { clear: both; } .ie7 .frb .cf { zoom: 1; }


/* Border-Box */

.frb *, .frb *:before, .frb *:after {

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

}


/* Banner wide settings */

.frb input, .frb button {

 font-size: inherit;
 font-family: inherit;

}

.frb button {

 cursor: pointer;
 outline: 0;
 text-align: center;

}

/* --- Main banner wrapper --- */

div#{{{banner}}} {

 display: none;
 position: absolute;
 top: 0;
 left: 0;
 right: 0;
 z-index: 110;
 background: transparent;

}

.frb {

 border-bottom: 1px solid #c8ccd1;
 background-color: #fff;
 box-shadow: 0 1px 1px rgba(0,0,0,0.1);
 color: #222;
 font: 1em/1.2 "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
 font-weight: 500;

}

/* --- Window Styles --- */

.frb-window {

 position: relative;
 width: 100%;
 padding: 0.5em 0 0.5em 0.5em;

}

body.rtl .frb-window {

 padding: 0.5em 0.5em 0.5em 0;

}

/* --- Close button --- */

.frb-close {

 display: inline-block;
 position: absolute;
 right: .6em;
 top: .5em;
 z-index: 999;
 font-size: .8em;
 text-transform: uppercase;
 cursor: pointer;
 opacity: .5;
 background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat right center / 9px 9px;
 padding-right: 14px;

}

body.rtl .frb-close {

 right: auto;
 left: .6em;
 background-position: right center;
 padding: 0 0 0 14px;

}

.frb-close:hover { opacity: 1; }

/* -------------- Message -------------- */

.frb-message {

 display: table-cell;
 width: auto;
 vertical-align: top;
 font-family: "Linux Libertine", Georgia, Times, serif;
 font-size: 1.05em;
 color: #000;
 position: relative;
 padding: .9em;
 line-height: 1.4;
 border-radius: 0.5em;
 border: 8px solid #990000;
 background-color: #020524;
 background: #f8f9fa url('//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg') no-repeat 5px 5px / 15px 15px;

}

.frb-highlight {

 border-bottom: 3px solid #990000;

}

@media (min-width : 960px) {

 .frb-message { 
   padding: .7em 1.3em;
   font-size: 1.35em;
   background-size: 20px 20px, auto;
 }

}

@media (min-width : 1200px) {

 .frb-message { 
   padding: .7em 1.5em;
   background-position: 6px 28px;
 }

}

@media (min-width : 1300px) {

 .frb-message { 
   font-size: 1.4em;
   background-position: 6px 28px;
 }
   html[lang="en"] .frb-message { font-size: 1.5em; }

}

@media (min-width : 1500px) {

   .frb-message { 
       font-size: 1.5em;
       background-position: 8px 30px;
   }
   html[lang="en"] .frb-message { font-size: 1.6em; }

}

@media (min-width : 1800px) {

   .frb-message { height: 16.5em; }

}

.frb-message p {

   margin: 0.25em 0;

}

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

.frb-form {

 display: table-cell;
 position: relative;
 width: 30%;
 height: 100%;
 vertical-align: top;
 padding: 1.7em .75em .5em .75em;
 background: #fff;

}

.frb-form:before {

 position: absolute;
 left: 0;
 top: 50%;
 content: " ";
 margin: 0;
 border: 10px solid transparent;
 border-left-color: #990000;
 pointer-events: none;

}

@media (min-width : 960px) {

 .frb-form {
   width: 25%;
   padding-top: 2em;
 }

}

.frb-form fieldset {

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

}

.frb-form ul {

 display: table;
 width: 100%;
 margin: 0 0 .5em 0;
 padding: 0;
 list-style: none;

}

.frb-form li {

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

}


.frb-form legend {

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

}

/* Hide radio buttons */

.frb-form li input[type="radio"] {

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

}

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

.frb-btn {

 width: 100%;
 display: block;
 background-color: #f8f9fa;
 color: #222222;
 font-size: .9em;
 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;
 -webkit-transition: all .25s ease-in-out;
 -moz-transition:    all .25s ease-in-out;
 transition:         all .25s ease-in-out;

} .frb-btn:hover {

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

} .frb-btn:active {

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

} .frb-amounts .frb-btn:focus {

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

} .frb-btn.checked {

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

} .frb-btn.frb-link {

 color: #3366cc;

} .frb-btn.frb-link:active {

 color: #2a4b8d; 

}

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

.frb-frequency li {

 width: 50%;

}

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

.frb-amounts legend {

 display: block;

} .frb-amounts li {

 width: 25%;

}

/* Chrome specific - need to be floated for height 100% to work */ @media screen and (-webkit-min-device-pixel-ratio:0) {

 .frb-amounts li { float: left; }
 .rtl .frb-amounts li { float: right; }

}

.frb-amounts .frb-btn {

 height: 100%;
 font-size: 1.2em;

}

@media (max-width : 1100px) { .frb-amounts .frb-btn { font-size: .9em; } }

  • --- Other Amount --- */

.frb-amt-other {

 display: block;
 position: relative;
 padding: 0;

} .frb-amt-other input[type="text"] {

 width: 100%;
 padding: 1.42em .5em;
 font-size: .7em;

} @media (min-width : 1100px) {

 .frb-amt-other input[type="text"] {
   font-size: .9em; 
   padding: 1.5em .5em;
 }

} @media (min-width : 1200px) {

   .frb-amt-other input[type="text"] {
       font-size: 1em; 
       padding: 1.29em .5em;
   }

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

   .frb-amt-other input[type="text"] {
       padding: 1.35em .5em;
   }

} @media screen and (min-width : 1100px) and (-webkit-min-device-pixel-ratio:0) {

   .frb-amt-other input[type="text"] {
       padding: 1.45em .5em;
   }

} @media screen and (min-width : 1200px) and (-webkit-min-device-pixel-ratio:0) {

   .frb-amt-other input[type="text"] {
       padding: 1.23em .5em;
   }

} /* --- .frb-amt-other.other-entered input[type="text"] {

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

}

.frb-amt-other input[type="text"]:hover{

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

}

.frb-amt-other input[type="text"]:focus {

   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;

}

.frb-form .frb-submit {

 padding-bottom: 0;

}

.frb-submit li {

 width: 33.33%;

}

.frb-submit .frb-btn img {

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

}


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

 .frb-submit .frb-btn {
 }
 .frb-submit ul {
   display: block;
 }
 .frb-submit li {
   width: 100%;
   margin-bottom: .5em;
   display: block;
   float: none;
 }

}

@media (min-width : 1100px) {

 .frb-submit .frb-btn {
   min-height: 4.2em;
 }
 .frb-submit .frb-btn img {
   max-height: 1.9em;
 }

}


/* --- Secure Transaction Legend --- */ .frb-secure-transaction {

 display: block;
 padding: .4em 1em;
 margin: 0 auto;
 color: #000;
 font-size: .85em;
 text-transform: uppercase;
 text-align: center;
 opacity: .7;

} .frb-secure-transaction img {

 width: 1.2em;
 height: 1.2em;
 display: inline-block;

}

/* --- Footer / Small Print --- */ .frb-footer {

 padding: 0 2em .5em 2em;
 font-size: .75em;
 color: #555;
 text-align: center;
 display: none;
 font-weight: normal;

}

.frb:hover .frb-footer { display: block; }


/* --- Maybe later --- */

.frb-ml {

 height: 100%;
 font-size: .85em;
 position: relative;
 width: auto;
 padding: 0;
 margin-top: .5em;

}

@media (min-width: 960px) { .frb-ml { font-size: .9em; } } @media (min-width: 1200px) { .frb-ml { font-size: .95em; } }

.frb-ml-form {

 display: none;
 position: absolute;
 width: 100%;
 padding: 1em;
 margin-top: .4em;
 text-align: center;
 background: white;
 border: 1px solid #888888;
 border-radius: 2px;
 box-shadow: 0 0.15em 0 0 rgba(0, 0, 0, 0.15);
 z-index: 10;

}

.frb-ml-form legend {

 display: block; 

}

.frb-ml-form:after, .frb-ml-form:before {

 bottom: 100%;
 left: 50%;
 border: solid transparent;
 content: " ";
 height: 0;
 width: 0;
 position: absolute;
 pointer-events: none;

}

.frb-ml-form:after {

 border-color: rgba(255, 255, 255, 0);
 border-bottom-color: #ffffff;
 border-width: 10px;
 margin-left: -10px;

}

.frb-ml-form:before {

 border-color: rgba(136, 136, 136, 0);
 border-bottom-color: #888888;
 border-width: 11px;
 margin-left: -11px;

}

.frb-ml-form form {

 margin-top: .5em;

}

.frb-ml-form input {

 width: 100%;
 padding: 0.5em;
 margin: 0;
 border: 1px solid #9aa0a7;
 border-radius: 2px;

}

.frb-ml-form input:focus {

 border-color: #3366cc;

}

.frb-ml-form input.error {

 border-color: #ff0000;

}

.frb-ml-form button {

 width: 100%;
 display: block;
 cursor: pointer;
 line-height: 1;
 background: #3366cc;
 color: white;
 border: 1px solid #3366cc;
 border: none;
 border-radius: 2px;
 padding: .5em;
 margin-top: .5em;
 transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;

}

.frb-ml-form button:hover { background: #447ff5; }

.frb-ml-form button:active { background: #2a4b8d; }

.frb-ml-form #errorMessageContainerId {

 color: #ff0000;
 padding-top: .25em;

}

.frb-ml-ty {

 padding: 0 1em;
 text-align: center;
 cursor: default;

}

</style>

<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 = 16;
       var bannerHeight = $('.frb-window').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();
   /* Resize after delay so images have loaded. TODO: find better way to do this */
   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 */
   /* Don't set a cookie: this is a large banner and only shown on first view anyway */
   $('#{{{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 = $(".frb-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() {

   $(".frb-ml-form input[name=rml_country]").val(Geo.country);
   $(".frb-ml-form input[name=rml_language]").val(mw.config.get('wgUserLanguage'));
   $(".frb-ml-form input[name=rml_submitDate]").val(fundraisingBanner.getCurrentDate());
   $(".frb-ml-form input[name=rml_segment]").val(Math.floor((Math.random() * 100) + 1));
   $(".frb-ml-link").click(function() {
       $('.frb-ml-form').toggle();
       $('#control_EMAIL').focus();
   });
   $(".frb-ml-form button").bind("click", function() {
       if ( mw.util.validateEmail( $(".frb-ml-form form input[name='Email']").val() ) ) {
           fundraisingBanner.postReminderForm();
           $(".frb-ml-form").hide();
           $(".frb-ml-link").hide();
           $(".frb-ml-ty").show();
           fundraisingBanner.addSpace();
           mw.centralNotice.hideBanner(); // Hide future banners for 7 days
           return false;
       } else {
           $(".frb-ml-form form input[name='Email']").addClass("error");
           $(".frb-ml-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() {

   $('.frb-replace-country').text( fundraisingBanner.countryNames[Geo.country] );
   fundraisingBanner.initReminderForm();
   fundraisingBanner.show();
   $(".frb-amounts .frb-btn").click(function() {
       // Clear other amounts
       $("#amount_other").removeClass("other-entered");
       // Check only this button
       $(".frb-amounts .frb-btn").removeClass("checked");
       $(this).siblings("input").addClass("checked");
       // Check only this label
       $(".frb-amounts label").removeClass("checked");
       $(this).addClass("checked");
       
       // Clear "other" box and restore placeholder
       $('.frb-amounts .frb-btn').val();
       $('.frb-amounts .frb-btn').attr("placeholder", fundraisingBanner.amountOtherPlaceholder);
   });
   $(".frb-amt-other").click(function() {
       $(".frb-amt-other").prop('checked', true);
       $(".frb-amt-other .frb-btn").focus();
   });
   fundraisingBanner.amountOtherPlaceholder = $(".frb-amt-other .frb-btn").attr("placeholder");  
   // Remove the placeholder on focus
   $("body").on("focus", ".frb-amt-other .frb-btn", function(){
       // Uncheck predefined amounts
       $(".frb-amounts input").removeClass("checked");
       $(".frb-amounts label").removeClass("checked");
       // Check this amount
       // $('#input_amount').addClass('focused'); 
       $(this).removeAttr("placeholder");
   });
   // Restore the placeholder if the value is empty. Add / remove class from parent li.
   $("body").on("blur", ".frb-amt-other .frb-btn", function(){
       //console.log("the value is: " + fundraisingBanner.amountOtherPlaceholder);
       if($(this).val() === ""){
           $(this).attr("placeholder", fundraisingBanner.amountOtherPlaceholder);
           $(".frb-amt-other .frb-btn").removeClass("checked");
       } else {
           $(".frb-amt-other .frb-btn").addClass("checked");
       }
   });

}); </script>