MediaWiki:Centralnotice-template-B1718 1205 WMCH dsk sm

From Meta, a Wikimedia project coordination wiki

<style> /* Box-sizing */ .frb, .frb *, .frb *:before, .frb *:after {

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

}

/* In-article banner styles


*/

  1. frb-inline {
   display: table;
   position: relative;
   text-align: center;
   background: white;
   color: black;
   font-size: 14px;
   line-height: 1.2; /*16.8px @14px*/
   margin: 14px 0 28px;
   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;

}

@media (max-width : 719px) { #frb-inline { clear: both; } }

html[lang="en"] #frb-inline {

   font-size: 14px;

}

/* --- Close and RML Options --- */ .frb-inline-topbar {

   width: 100%;
   padding: 2px 10px 5px;
   text-align: center;
   background-color: #990000;
   color: #FFFFFF;
   display: inline-block;
   z-index: 999;

}

.frb-inline-header {

   display: inline-block;
   font-weight: bold;
   font-size: 16px;
   line-height: 1.125; /*18px @16px*/
   padding: 4px 0;

}

.frb-inline-window {

   position: relative;
   float: right;
   text-align: right;

}

.frb-inline-main {

   padding: 13px;

}

.frb-inline-message {

   font-size: 16px;
   padding: 0 0 8px;

}

.frb-inline-message-image {

   height: 16px;
   margin-top: -3px;

}


  1. frb-inline fieldset {
   width: 100%;
   margin: 0 auto;
   padding: 0;
   border: none;

}

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

  1. frb-inline legend {
   width: 100%;
   margin: 0 0 6px;
   text-align: center;
   font-size: 14px;
   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;

}

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

.frb-btn {

   display: block;
   background-color: #f8f9fa;
   color: #222;
   border: 1px solid #9aa0a7;
   border-radius: 2px;
   padding: 12px 6px;
   outline: 0;
   text-align: center;
   font-size: 16px;
   line-height: 1; /*16px @16px*/
   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-btn:focus {

   border-color: #36c;
   box-shadow: inset 0 0 0 1px #36c;

}

  1. frb-form input[type="radio"]:checked + .frb-btn,

.frb-form input[type="radio"]:checked + #frb-amt-other-label,

  1. frb-form .frb-btn.checked {
   background-color: #2a4b8d;
   color: #fff;
   border-color: #7d8389;

}

/* Blue text buttons */ .frb-btn.frb-btn-btxt {

   color: #36c;

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

   color: #2a4b8d;

}

/* Submit/Continue buttons (blue background) */

  1. frb-btn-submit {
   display: block;
   width: 100%;
   padding: 7px 8px 8px;
   color: #fff;
   background-color: #36c;
   border-color: #36c;
   cursor: pointer;
   border: 0;
   border-radius: 2px;
   font-size: 14px;
   transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;

} .frb-btn-submit:hover {

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

} .frb-btn-submit:active {

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

}

.frb-continue .frb-btn-submit {

   font-size: 16px;

}

/* Hide radio buttons. Based on http://jqueryui.com/button/#radio */ .frb-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 layout --- */

.frb-amounts {

   margin-bottom: 11px;

}

.frb-amounts ul li {

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

}

body.rtl .frb-amounts ul li {

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

}

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

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

   body.ltr .frb-amounts ul li:nth-child(2n) {
       margin-right: 0;
   }
   body.rtl .frb-amounts ul li:nth-child(2n) {
       margin-left: 0;
   }

}

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

   .frb-amounts ul li {
       width: 31.8333333%;
       margin-right: 1.5%;
   }
   body.rtl .frb-amounts ul li {
       margin-right: 0;
       margin-left: 1.5%;
   }
   body.ltr .frb-amounts ul li:nth-child(3n) {
       margin-right: 0;
   }
   body.rtl .frb-amounts ul li:nth-child(3n) {
       margin-left: 0;
   }

}

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

.frb-amounts li label {

   font-size: 18px;

}

@media (min-width: 768px) {

   .frb-amounts li label {
       font-size: 20px;
   }

}

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

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

}

.frb-amounts li label {

   display: block;
   width: 100%;
   height: 50px;
   padding: 5px;
   font-size: 16px;
   line-height: 2.5; /*40px @16px*/
   font-style: normal;
   font-weight: normal

}

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

  1. frb-amt-other-input {
   margin: 0;
   padding: 0;
   background: transparent;
   border: none;
   width: 90%;
   color: #222222;
   text-align: center;
   direction: ltr;
   border-radius: 0;
   font-size: 16px;

}

/*Disable number spinner*/

  1. frb-amt-other-input::-webkit-inner-spin-button,
  2. frb-amt-other-input::-webkit-outer-spin-button {
 -webkit-appearance: none;
 margin: 0;

}

  1. frb-amt-other-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #222222;

}

  1. frb-amt-other-input::-moz-placeholder { /* Firefox 19+ */
   color: #222222;

}

  1. frb-amt-other-input:-moz-placeholder { /* Firefox 18- */
   color: #222222;

}

  1. frb-amt-other-input:-ms-input-placeholder { /* IE 10+ */
   color: #222222;

}

/* Placeholder focus styles */ .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus::-webkit-input-placeholder { /* Chrome/Opera/Safari */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus:-moz-placeholder { /* Firefox 18- */

   color: #fff;
   opacity: 1 !important;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus::-moz-placeholder { /* Firefox 19+ */

   color: #fff;
   opacity: 1 !important;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:focus:-ms-input-placeholder { /* IE 10+ */

   color: #fff;

}

/* Placeholder checked styles */ .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:-moz-placeholder { /* Firefox 18- */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input::-moz-placeholder { /* Firefox 19+ */

   color: #fff;

} .frb-amounts input[type="radio"]:checked + #frb-amt-other-label #frb-amt-other-input:-ms-input-placeholder { /* IE 10+ */

   color: #fff;

}

  1. frb-amt-other-label {
   background: #f8f9fa;
   border: 1px solid #9aa0a7;
   color: #555;
   padding-left: 3px;

}

  1. frb-amt-other:checked + #frb-amt-other-label #frb-amt-other-input {
   color: #FFFFFF;

}

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

/* Always horizontal */ .frb-methods ul {

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

} .frb-methods ul li {

   display: table-cell;
   padding: 0 4px;
   vertical-align: top;

}

/* Only where there are 4 methods, display 2x2 */ .frb-methods ul li:first-child:nth-last-child(4), .frb-methods ul li:first-child:nth-last-child(4) ~ li {

   float: left;
   width: 50%;
   margin-bottom: 4px;

}

.frb-methods ul li:first-child:nth-last-child(4) .frb-btn, .frb-methods ul li:first-child:nth-last-child(4) ~ li .frb-btn {

   min-height: 32px;

}


/* --- Payment method buttons appearance --- */ .frb-methods .frb-btn {

   width: 100%;
   padding: 7px;
   min-height: 50px;

}

/*Adjust padding for method buttons with logo, e.g. payment methods*/ .frb-methods .frb-btn-logo {

 padding: 2px 8px;

}

/*Payment method buttons logo sizing*/ .frb-btn-logo svg {

 width: 100%;
 height: 100%;
 max-height: 24px;

}

.frb-logo-paypal-usd {

   margin-bottom: -4px;

}

.frb-methods legend, .frb-methods button {

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

}

.frb-methods.hint legend {

   color: #588fbb;

} .frb-methods.hint button {

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

}

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

  1. frb-inline-close-options {
   display: block;
   z-index: 999;
   text-transform: uppercase;
   background: #f2f2f2;
   color: black;

}

.frb-inline-close,

  1. frb-inline-remind {
   cursor: pointer;
   opacity: 1;
   color: #666666;
   z-index: 999;
   text-transform: uppercase;

}

.frb-inline-close {

   display: inline-block;
   padding: 6px;

}

.frb-close-x {

   margin-bottom: -1px;

}

.frb-close-x g {

   stroke: #666666;

}

.frb-inline-close:hover,

  1. frb-inline-remind:hover,

.frb-inline-close:focus,

  1. frb-inline-remind:focus {
   color: #222222;

}

.frb-inline-close:hover .frb-close-x g, .frb-inline-close:focus .frb-close-x g {

   stroke: #222222;

}

  1. frb-inline-close-bottom {
  position: absolute;
  bottom: -32px;
  left: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;

}

/* --- Smallprint --- */

  1. frb-inline #frbanner-smallprint {
   width: 100%;
   font-size: 80%;
   margin-top: 23px;
   text-align: center;
   color: #3c3c3c;

}

  1. frb-inline .recurring-details {
   display: none;

}

/* Bottom "reminder" banner styles


*/

  1. frb-nag {
   z-index: 100;
   position: fixed;
   left: 0;
   bottom: 0;
   width: 100%;
   display: block;
   color: black;
   background-color: white;
   padding: 10px 25px;
   text-align: center;
   font-size: 15px;
   line-height: 1; /*15px @15px*/
   font-weight: bold;
   border: 5px solid #990000;
   box-shadow: 0 0 10px rgba(0,0,0,.5);
   cursor: pointer;

}

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

}

@media (min-width: 720px) {

   #frb-nag {
       font-size: 17px;
   }

}

  1. frb-nag img {
   height: 19px;
   width: 19px;
   margin-bottom: -4px;
   padding-right: 4px;

}

  1. frb-nag .frb-btn {
   display: inline-block;
   font-size: 12px;
   padding: 3px 6px;

}

.frb-nag-message {

   vertical-align: middle;
   margin-bottom: 8px;
   line-height: 1.1; /*16.5px @15px*/

} .frb-nag-message:hover {

   text-decoration: underline;

}

.frb-nag-close {

   display: block;
   border: 2px solid black;
   position: absolute;
   top: -20px;
   right: -5px;
   width: 35px;
   height: 35px;
   padding: 5px;
   background: white url('//upload.wikimedia.org/wikipedia/donate/8/84/Close-dark-trilogy.png') no-repeat center center;
   background-size: 50%;
   cursor: pointer;
   border-radius: 50%;
   box-shadow: 0 0 10px rgba(0,0,0,.3);
   -webkit-transition: all .25s ease-in-out;
   -moz-transition:    all .25s ease-in-out;
   transition:         all .25s ease-in-out;

} body.rtl .frb-nag-close {

   right: auto;
   left: -5px;

} .frb-nag-close:active {

   -moz-transform:    scale(1.05);
   -ms-transform:     scale(1.05);
   -webkit-transform: scale(1.05);
   transform:         scale(1.05);

}

/* give the footer padding so it's visible above the nag */ footer {

   padding-bottom: 120px;¨

}

/*!--- Focus styles ----*/

.smallprint a:focus {

 outline: 2px solid #36c;

}

.frb-btn-submit:focus, .frb-amounts input[type="radio"]:checked + label:focus, .frb-amounts input[type="radio"]:checked + .frb-btn:focus, .frb-amounts input[type="radio"]:checked:focus + label, .frb-amounts input[type="radio"]:checked:focus + .frb-btn, .frb-amt-other.is-focused .frb-btn {

   border-color: #36c;
   box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;

}

.frb-inline-close:focus {

   box-shadow: inset 0 0 0 2px #36c;

}

.frb-btn:focus, .frb-amounts input[type="radio"]:focus + label, .frb-amounts input[type="radio"]:focus + .frb-btn {

   border-color: #36c;
   box-shadow: inset 0 0 0 1px #36c;

}

</style>

<script> /** Provides alterImpressionData hook for CentralNotice

*  This info will be sent back with Special:RecordImpression
*/

mediaWiki.centralNotice.bannerData.alterImpressionData = function( impressionData ) {

   // Returning true from this function indicates the banner was shown
   if (mediaWiki.centralNotice.bannerData.hideReason) {
       impressionData.reason = mediaWiki.centralNotice.bannerData.hideReason;
   }
   if (mediaWiki.centralNotice.bannerData.cookieCount) {
       impressionData.banner_count = mediaWiki.centralNotice.bannerData.cookieCount;
   }
   
   return !mediaWiki.centralNotice.bannerData.hideResult;

};

var frb = frb || {};

frb.storedOptions = {};

frb.setMethodcc = function(options) {

   $('.frb-methods').slideUp();
   $('.frb-step2').slideDown();
   var submitbutton = document.getElementById("frb-btn-submit");
   submitbutton.className += "paymentmethod-cc";
   var donationForm = document.donationForm;
   $( '.paymentmethod-cc' ).click( function() {
       if( frb.validateForm() ) {
           donationForm.action = 'https://www.wikimedia.ch/donate/';
           $( '#frb-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
           donationForm.submit();
       } else {
           alert( "Please select an amount to donate (at least Fr. 1.-)" );
       }
   });

};

frb.setMethodpp = function(options) {

   $('.frb-methods').slideUp();
   $('.frb-step2').slideDown();
   var submitbutton = document.getElementById("frb-btn-submit");
   submitbutton.className += "paymentmethod-pp";
   $( '.paymentmethod-pp' ).click( function() {
       if( frb.validateForm() ) {
           donationForm.action = 'https://www.paypal.com/cgi-bin/webscr';
           $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', false );
           donationForm.lc.value = mw.config.get('wgUserLanguage'); // set to correct language
           donationForm.submit();
       } else {
           alert( "Please select an amount to donate (at least Fr. 1.-)" );
           return false;
       }
   });

};

$( '.frb-pm-slip' ).click( function() {

       donationForm.action = 'https://www.wikimedia.ch/donate/payment-slip-85-359089-1/';
       $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
       donationForm.submit();

});

frb.validateForm = function() {

   var form = document.donationForm;
   var error = false;
   // Get amount selection
   var amount = $('input[name=amount]:checked').val();
   if( amount === 'Other' ) {
       amount = $('#frb-amt-other-input').val();
   }
   // Check amount is a real number
   error = ( amount == null || isNaN( amount ) || amount.value <= 0 );
   // Check amount is at least the minimum
   if ( amount < 1 || error ) {
       return false;
   } else if ( amount > 99999 ) {
       return false;
   }
   // make sure the right field form has the amount
   $('input[name=amount]:checked').val( amount );
   return !error;

};


frb.insertInlineBanner = function() {

   // Place frb-inline in article: before first paragraph, or at top
   var $inlineBanner = $('#frb-inline');
   var $firstPara    = $('#mw-content-text .mw-parser-output > p:first-of-type').first();
   if ( $firstPara.length > 0 && !mw.config.get('wgIsMainPage') ) {
       $firstPara.before( $inlineBanner );
   } else {
       $('#mw-content-text .mw-parser-output').prepend( $inlineBanner );
   }
   $inlineBanner.show();

};

frb.initNag = function() {

   /* --- Code for sticky "nag" banner --- */
   var nagHoverTimeout;
   $(window).scroll(function() {
       var nagRevealPosition = $('#frb-inline').offset().top + $('#frb-inline').outerHeight();
       if ( $(window).scrollTop() <= nagRevealPosition ) {
           $('#frb-nag').finish();
           $('#frb-nag').hide();
       } else {
           setTimeout(function(){
               if ( $(window).scrollTop() > nagRevealPosition ) {
                   $('#frb-nag').slideDown();
               }
           }, 1500);
       }
   });
   $('.frb-nag-close').click(function(e) {
       $('#centralNotice').hide(); // Hide nag (but not inline banner)
       e.stopPropagation();
   });
   $('#frb-nag').click(function() {
       $('html, body').animate({
           scrollTop: $('#frb-inline').offset().top
       }, 400);
       $('#frb-nag').slideToggle(400);
   });

};


$(function() {


   $('.frb-inline-close').on('click keypress', function(e) {
       if (e.which === 13 || e.type === 'click') {
           $('#frb-inline').hide();
           mw.centralNotice.hideBanner();
           e.stopPropagation();
       }
   });

// Reset "other box" if they click a different amount

   // Provide a hint they should click the buttons
   $('.frb-inline-message').click(function() {
       $('.frb-methods').addClass('hint');
       setTimeout(function() {
           $('.frb-methods').removeClass('hint');
       }, 400);
   });
   /* Hide banner outside of main namespace (and Main Page, for sites where that isn't in main namespace) */
   if ( mw.config.get('wgNamespaceNumber') > 0 && !mw.config.get('wgIsMainPage') ) {
       mw.centralNotice.bannerData.hideResult = true;
       mw.centralNotice.bannerData.hideReason = 'namespace';
   }
   if (!mw.centralNotice.bannerData.hideResult) {
       frb.insertInlineBanner();
   }
   // Focus for #input_amount_other
   $('.frb-amt-other').on('click keypress', function(e) {
       if (e.which === 13 || e.type === 'click') {
           document.getElementById('frb-amt-other').checked = true;
           $('#frb-amt-other-input').focus();
           e.stopPropagation();
       }
   });
   // Activate #input_amount_other radio when tabbing into #frb-amt-other-input
   // Add focus class to parent
   $('#frb-amt-other-input').blur(function() {
       $(this).closest('.frb-amt-other').removeClass('is-focused');
   })
   .focus(function() {
       document.getElementById('frb-amt-other').checked = true;
       $(this).closest('.frb-amt-other').addClass('is-focused');
   });
   
   $('#frb-form [id^=frb-amt-ps]').click(function() {
       $('#frb-amt-other-input').val();
   });


}); </script>