Wikimedia Meta-Wiki

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

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

}

/* Transitions */

.frb-form .frb-btn, .frb-form #amount_other { 

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

}

/* 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;
   transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;

} .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 --- */
  1. amount_other {
   display: block;
   position: relative;
   padding: 0;

}

  1. amount_other .frb-btn-other {
   display: block;
   height: auto;
   cursor: pointer;
   font-size: 1em;
   font-weight: bold;

}

  1. amount_other input[type="text"] {
   width: 100%;
   display: block;
   background-color: #f8f9fa;
   color: #222;
   border: 1px solid #9aa0a7;
   border-radius: 2px;
   padding: 1.05em .5em;
   font-size: .8em;
   outline: 0;
   text-align: center;
   line-height: 1;
   cursor: pointer;
   font-family: inherit;
   font-weight: 500;
   transition: all 100ms;

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

   #amount_other input[type="text"] {
       font-size: .9em; 
       padding: 1.2em .5em;
   }

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

   #amount_other input[type="text"] {
       font-size: 1em; 
       padding: 1.05em .5em;
   }

}

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

   #amount_other input[type="text"] {
       padding: 1.2em .5em;
   }

}

  1. amount_other.other-entered input[type="text"] {
   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

  1. amount_other input[type="text"]:hover{
   background-color: #fff;
   color: #444;
   border-color: #a2a9b1;

}

  1. amount_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
       $('#input_amount_other_box').val();
       $('#input_amount_other_box').attr("placeholder", fundraisingBanner.amountOtherPlaceholder);
   });

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

   fundraisingBanner.amountOtherPlaceholder = $("#input_amount_other_box").attr("placeholder");  

   // Remove the placeholder on focus
   $("body").on("focus", "#input_amount_other_box", 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", "#input_amount_other_box", function(){
       //console.log("the value is: " + fundraisingBanner.amountOtherPlaceholder);

       if($(this).val() === ""){
           $(this).attr("placeholder", fundraisingBanner.amountOtherPlaceholder);
           $("#amount_other").removeClass("other-entered");
       } else {
           $("#amount_other").addClass("other-entered");
       }
   });

}); </script>

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