Jump to content

MediaWiki:Centralnotice-template-B1617 1205 en6C dsk p2 sm inart 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;

}

/* Box-sizing */

  1. frbanner3 *,
  2. frbanner3 *:before,
  3. frbanner3 *:after,
  4. frbanner-nag {
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

/* In-article banner styles


*/

  1. frbanner3 {
   display: table;
   position: relative;
   text-align: justify;
   background: white;
   color: black;
   font-size: 1em;
   position: relative;
   margin-bottom: 2.25em;
   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;

}


.frbanner3-message-container {

   font-size: 1.15em;
   font-weight: bold;
   line-height: 1.4;
   padding: 0 0 .75em;
   display: block;

}

.frbanner3-message-padding {

   padding: .75em;
   display: block;

}

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

  1. frbanner3-close-options {
   text-align: center;
   background: #f2f2f2; 
   padding: .2em .5em;
   display: block;
   z-index: 999;
   font-size: .8em;
   text-transform: uppercase;

}

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

  1. frbanner3-close {
   bottom: -2.5em;
   font-size: 0.8em;
   left: 0;
   position: absolute;
   text-align: center;
   width: 100%;
   text-transform: uppercase;

}

  1. frbanner3-close,
  2. frbanner3-remind {
   display: inline-block;
   cursor: pointer;
   padding: 0.5em 1em;
   color: #8a8a8a;

}

  1. frbanner3-close {
   z-index: 999;

}

  1. frbanner3-close:hover,
  2. frbanner3-remind:hover {
   color: #000;

}

  1. frbanner3-close-x {
   background: url('//upload.wikimedia.org/wikipedia/donate/3/32/Close-thin.png') no-repeat center center;
   width: 7px;
   height: 7px;
   display: inline-block;
   margin: .25em 0 0 .5em;

}

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

  1. frbanner3 legend {
   width: 100%;
   margin: 0;
   text-align: center;
   color: #7c7c7c;
   font-weight: 500;
   padding: .5em 0 .2em 0;

}

.frbanner-submit legend {

   display: none;

}

  1. frbanner3 ul { margin: 0; }

.frbanner-frequency ul {

   margin-top: .75em !important;

}

  1. frbanner3 fieldset {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   border: none;

}

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

.frbanner-btn, #amount_label_5 {

   display: block;
   background-color: #f8f9fa;
   color: #222;
   border: 1px solid #9aa0a7;
   border-radius: 2px;
   padding: .5em .5em;
   margin: 0 auto;
   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, #amount_label_5:hover {

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

} .frbanner-btn:active, #amount_label_5:active {

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

} .frbanner-btn:focus, #amount_label_5: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, .frbanner-amounts li label.checked {

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

}

/* --- Buttons layout --- */

.frbanner-frequency ul, .frbanner-amounts ul, .frbanner-submit ul {

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

}

.frbanner-frequency ul li, .frbanner-amounts ul li, .frbanner-submit ul li {

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

}

/* --- Frequency buttons appearance --- */

.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: 1.1em;

}

/* 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 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.1em;
   }

}

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

  1. input_amount_other_box {
   padding: 0;
   margin: 0;
   background: #fff;
   border: none;
   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;

}

  1. amount_total_5 {
   white-space: nowrap;

}

  1. amount_label_5 {
   background: #fff;
   border: 1px solid #aaa;
   color: #aaa;
   padding-left: .2em;
   padding-right: .2em;
   position: relative;

}

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

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

   display: none !important;

}

.frbanner-submit .frbanner-btn {

   width: 100%;
   font-size: 1.15em !important;
   font-weight: 500;
   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

}

.frbanner-submit .frbanner-btn img {

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

}

.frbanner-continue {

   margin-top: 1em;

}

/* --- Smallprint --- */

  1. frbanner3 #frbanner-smallprint {
   width: 100%;
   font-size: 80%;
   margin-top: 2em;
   text-align: center;
   color: #3c3c3c;

}

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

.frbanner-email-reminder-link {

  text-transform: uppercase;
  display: inline-block;
  cursor: pointer;
  color: #8a8a8a;

}

.frbanner-email-reminder-link:hover {

  color: #000;

}

.frbanner-email-reminder {

   display: none;
   position: absolute;
   cursor: default;
   padding: 1em;
   top: 2.9em;
   left: 50%;
   z-index: 10000;
   -moz-transform: translateX(-50%);
   -ms-transform: translateX(-50%);
   -webkit-transform: translateX(-50%);
   transform: translateX(-50%);
   width: 30em;
   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;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
   box-sizing: border-box;

}

.frbanner-email-reminder-form-anchor {

   bottom: 100%;
   left: 50%;
   position: absolute;

}

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

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

}

.frbanner-email-reminder-form-anchor:before {

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

}

.frbanner-email-reminder-form-anchor:after {

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

}

.frbanner-email-reminder * {

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

}

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

   display: table;
   width: 100%;
   text-align: center;
   font-weight: 500;

}

.frbanner-email-reminder-form input {

   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-form input:focus {

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

} .frbanner-email-reminder-form input.error {

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

}

.frbanner-email-reminder-form button, .frbanner-continue button {

   width: 100%;
   display: block;
   margin-top: .5em;
   padding: .5em;
   color: #fff;
   background-color: #3366cc;
   border-color: #3366cc;
   cursor: pointer;
   border: 0;
   border-radius: 2px;
   font-size: 1em;

} .frbanner-email-reminder-form button:hover, .frbanner-continue button:hover {

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

} .frbanner-email-reminder-form button:active, .frbanner-continue button:hover {

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

}

.frbanner-email-reminder-form #errorMessageContainerId {

   color: #CC0000;
   text-transform: none;

} .frbanner-email-reminder-done {

   text-transform: none;
   font-size: 1.1em;

}

.frbanner-email-reminder-form .smallprint {

   text-transform: none;
   margin-top: .5em;
   font-size: .8em;
   color: #555;
   line-height: 1.4;

}

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

  1. frbanner-nag {
   display: none;
   position: fixed;
   z-index: 999;
   top: 0;
   left: 0;
   color: black;
   background-color: white;
   padding: 5px;
   width: 100%;
   text-align: center;
   font-size: 17px;
   font-weight: bold;
   border: 5px solid #990000;
   box-shadow: 0 0 10px rgba(0,0,0,.5);

}

  1. frbanner-nag:hover {
   text-decoration: none;

}

  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: 2px;
   background-color: #f8f9fa;
   border: 1px solid #9aa0a7;
   color: #3366cc;
   font-size: .8em;
   padding: .25em .5em;
   cursor: pointer;
   vertical-align: middle;
   -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 {
   background-color: #fff;
   color: #444;
   border-color: #a2a9b1;

}

.frbanner-nag-close {

   display: block;
   position: absolute;
   top: 0;
   right: 5px;
   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 6px;
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   transition:         all .25s ease-in-out;

} .frbanner-nag-close:hover {

   opacity: 1;

}

/* --- Footer / Small Print --- */ .frbanner-legal {

   margin-top: 1em;
   font-size: .8em;
   line-height: 1.4;
   color: #555;

}

.recurring-details {

   display: none;

} </style>

   <a id="frbanner-nag" href="#frbanner3">
       <img src="//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg">
       If everyone reading this gave %MINIMUM%, we could keep Wikipedia thriving for years to come.
       <button class="frbanner-nag-donate">Donate now</button>
       
   </a>


<script> var fundraisingBanner = {};

fundraisingBanner.paymentMethod = ; fundraisingBanner.paymentSubMethod = ;

fundraisingBanner.setPaymentMethod = function(method, submethod) {

   fundraisingBanner.paymentMethod = method || 'cc'; // Default to credit card
   fundraisingBanner.paymentSubMethod = submethod || ;
   $('.frbanner-submit').fadeOut('fast', function() {
       if ( fundraisingBanner.paymentMethod === 'cc' || fundraisingBanner.paymentMethod === 'paypal' ) {
           $('.frbanner-frequency, .recurring-details').show();
       }
       $('.frbanner-step2').fadeIn('fast')
   });

};

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

// Place frbanner3 in article: before first paragraph, or at top var $inArticleBanner = $('#frbanner3'); var $firstPara = $('#mw-content-text > p:first-of-type').first();

if ( $firstPara.length > 0 ) { $firstPara.before( $inArticleBanner ); } else { $('#mw-content-text').prepend( $inArticleBanner ); }

$inArticleBanner.show();

   $(".frbanner-frequency label").click(function() {
       $(".frbanner-frequency label").removeClass("checked");
       $(this).addClass("checked");
   });
   /* --- Code for sticky "nag" banner --- */
   var nagHoverTimeout;
   $(window).scroll(function() {
       var nagRevealPosition = $('#frbanner3').offset().top + $('#frbanner3').outerHeight();
       if ( $(window).scrollTop() <= nagRevealPosition ) {
           $('#frbanner-nag').finish();
           $('#frbanner-nag').hide();
       } else {
           setTimeout(function(){
               if ( !$('.frbanner' ).hasClass('nag-reveal') && $(window).scrollTop() > nagRevealPosition ) {
                   $('#frbanner-nag').slideDown();
               }
           }, 1500);
       }
   });
   $('.frbanner-nag-close').click(function(e) {
       $('#frbanner-nag').remove();
       e.stopPropagation();
       e.preventDefault();
   });
   /* --- End code for sticky "nag" banner */


   $("#frbanner3-close").click(function(e) {
       $("#frbanner3").hide();
       mw.centralNotice.hideBanner();
       e.stopPropagation();
   });

}); </script>