MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad

<style> /* Clearfix */ .frb .cf:before, .frb .cf:after {

  content: "";
  display: table;

}

.frb .cf:after { clear: both; }

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

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

}

/* Common styles */ .frb label, .frb button, .frb input {

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

}

/* Main banner

---

*/

1. frb {

   position: absolute;
   top: 0 !important;
   left: 0;
   width: 100%;
   height: 100%;
   font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;

}

1. frb-mask {

   position: absolute;
   z-index: 1000;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: black;
   opacity: 0.8;

}

1. frb-window {

   position: relative;
   top: 0;
   left: 0;
   right: auto;
   width: 100%;
   margin-top: 0;
   color: #000;
   background: #fff;

}

@media (min-width: 768px) {

   #frb-window {
       margin-top: 20px;
       left: 5%;
       right: 5%;
       width: 90%;
   }

}

/* --- Message --- */

.frb-message {

   font-size: 20px;
   line-height: 1.3;
   border: 5px solid #990000;
   border-bottom: 0;

}

.frb-message-text {

   padding: 20px;
   font-weight: bold;

}

@media (min-width: 768px) {

   .frb-message {
       font-size: 24px;
       line-height: 1.4;
   }
   .frb-message-text {
       padding: 48px 72px;
   }

}

@media (min-height: 1000px) {

   .frb-message {
       font-size: 24px;
   }
   .frb-message-text {
       padding: 48px 72px;
   }

}

.frb-message-text p {

   margin-bottom: 10px;

}

.frb-message-text p:last-child {

   margin-bottom: 0;

}

/* Call to action */ .frb-cta {

   text-align: center;
   background: #990000;
   color: #fff;
   padding: 10px;
   font-weight: 400;
   font-size: 24px;
   display: block;
   margin: auto;
   width: 100%;
   position: relative;

}

@media (min-height: 1000px) {

   .frb-cta {
       padding: 27px;
   }

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

   .frb-cta {
       font-size: 33px;
   }

}

.frb-cta:after {

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

}

/* --- Form --- */

1. frb-donation-form {

   position: relative;
   background: #fff;
   padding: 1.5em 1.5em 0em;
   clear: both;

}

@media (min-width: 768px) {

  #frb-donation-form {
       padding: 2em 2em 1em 2em;
   }

}

1. frb-donation-form:before {

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

}

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

1. frb-donation-form legend {

   width: 100%;
   margin: 0 0 .5em;
   text-align: center;
   font-size: 16px;
   text-transform: uppercase;
   color: #222;

}

@media (min-width : 768px) { #frb-donation-form legend { font-size: 18px; } }

/* --- Amount buttons layout --- */ .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 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;

}

.frb-amounts li label {

   display: block;
   width: 100%;
   padding: 24px;
   line-height: 40px;
   font-size: 1.1em;
   font-style: normal;
   font-weight: bold;
   text-align: center;
   background: #f8f9fa;
   border: 1px solid #9aa0a7;
   border-radius: 4px;
   color: #000;
   cursor: pointer;

}

.frb-amounts li label:active {

   background-color: #d9d9d9;

}

@media (min-width: 768px) {

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

}

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

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

}

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

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

}

/* --- 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;
   padding-left: 5%;

}

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 {

   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 --- */

/* "Phone" layout, full width stacked */ @media (max-width: 767px) {

   .frb-submit li {
       width: 100%;
       margin-bottom: 6px;
   }

   #frb-window li.frb-submit {
       display: block;
       margin: 0;
   }

}

/* "Tablet" layout, next to each other */ @media (min-width: 768px) {

   .frb-submit ul {
       display: table;
       table-layout: fixed;
       width: 100%;
   }
   .frb-submit ul li {
       display: table-cell;
       padding: 0 10px;
       vertical-align: top;
   }

}

@media (min-width : 570px) {

   .frb-submit li {
       margin-bottom: 10px;
   }

}

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

.frb-submit .frb-btn {

   display: inline-block;
   width: 100%;
   padding: 0.8em 0.4em;
   font-size: 1.1em;
   line-height: 1;
   text-transform: uppercase;
   text-align: center;
   border: 1px solid #9aa0a7;
   border-radius: 4px;
   color: #36c;
   background-color: #f8f9fa;
   background-size: auto 50%;
   background-repeat: no-repeat;
   background-position: center center;
   cursor: pointer;

}

@media (min-width: 768px) {

   .frb-submit .frb-btn {
       min-height: 3.6em;
   }

}

.frb-submit .frb-btn:hover {

   background-color: #fff;

}

.frb-submit .frb-btn:active {

   background-color: #d9d9d9;
   color: #2a4b8d;

}

/* Payment logos */ .frb-submit .paymentmethod-pp {

   text-indent: -99999px;
   background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg');

}

/* --- Smallprint --- */

.frb-bankinfo {

   text-align: center;
   margin-top: 1em;
   font-size: .9em;

}

.frb-bankinfo span {

   white-space: nowrap;

}

.frb-footer {

   width: 100%;
   font-size: 75%;
   padding: 1em 20px;
   background: #e2e2e2;
   text-align: center;
   color: #3c3c3c;

}

/* --- Top bar --- */

.frb-topbar {

   background: #000;
   display: block;
   z-index: 999;
   color: #fff;
   font-size: 14px;
   text-transform: uppercase;
   text-align: right;
   width: 100%;

}

@media (min-width: 375px) {

   .frb-topbar {
       font-size: 16px;
   }

}

.frb-close, .frb-rml1-link {

   display: inline-block;
   padding: 8px;
   cursor: pointer;
   z-index: 999;
   vertical-align: middle;
   color: #ccc;

}

.frb-close:hover, .frb-rml1-link:hover {

   color: #fff;

}

/*Hover*/ .frb-close:hover .frb-close-x g {

   stroke: #fff;

}

.frb-rml1-link {

   width: 60%;
   border-right: 1px solid #666;

} body.rtl .frb-rml1-link {

   border-right: 0;
   border-left: 1px solid #666;

}

.frb-close {

   width: 38%;

}

.frb-close-x {

   height: 14px;
   width: 14px;
   margin-bottom: -2px;

}

@media screen and (min-width: 375px) {

   .frb-close-x {
       margin-bottom: -1px;
   }

}

.frb-close.bottom {

   text-align: center;
   color: white;
   display: inline-block;
   width: auto;
   margin: auto;
   z-index: 999;
   color: #fff;
   font-size: 13px;
   padding: 13px;
   text-transform: uppercase;
   cursor: pointer;

}

.frb-close.bottom:hover {

   color: #fff;

}

@media (min-width: 768px) {

   .frb-close.bottom {
       display: none;
   }

}

/* Bottom "reminder" banner styles

---

*/

1. frb-nag {

   z-index: 100;
   position: fixed;
   left: 0;
   bottom: -100%;
   width: 100%;
   display: block;
   color: black;
   background-color: white;
   padding: 10px 20px;
   text-align: center;
   font-size: 15px;
   line-height: 1;
   font-weight: bold;
   border: 5px solid #990000;
   box-shadow: 0 0 10px rgba(0,0,0,.5);
   cursor: pointer;
   -webkit-transition: all .5s ease-in-out;
   -moz-transition:    all .5s ease-in-out;
   transition:         all .5s ease-in-out;

}

1. frb-nag:hover {

   text-decoration: none;

}

@media (min-width: 720px) {

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

}

1. frb-nag.reveal {

   bottom: 0;

}

1. frb-nag img {

   height: 17px;
   width: 17px;

}

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;

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

}

1. frb-nag .frb-nag-message2 {

   display: none;

}

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

/*Outline reset*/ .frb-close:focus, .frb-rml1-link:focus, .frb-rml1-form input:focus, .frb-rml2-form input:focus, .frb-btn:focus, .frb-btn-submit:focus, .frb-frq-switch:focus,

1. frb-amt-other-input:focus {

   outline: 0;

}

.frb-rml2-form input:focus, .frb-frq-switch.is-active, .frb-btn:focus, .frb-rml2-form input:focus, .frb-amounts input[type="radio"]:focus + label, .frb-amounts input[type="radio"]:focus + .frb-btn {

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

}

/*Exception because of black background*/ .frb-rml1-form input:focus {

   box-shadow: inset 0 0 0 1px #FFFFFF, inset 0 0 0 1px #36c;

}

/*Focus styles*/ .frb-close:focus, .frb-rml1-link:focus {

   box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #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-close:focus, .frb-rml1-link:focus {

   color: #fff;

}

.frb-close:focus .frb-close-x g {

   stroke: #fff;

}

</style>

           
               Schließen
               <svg class="frb-close-x" role="img" aria-labelledby="frb-close-x-title" width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg"><title>Schließen</title><g stroke="#CCC" fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="M2 2l7 7M9 2L2 9"/></g></svg>
           

⧼Centralnotice-B16_WMCH_translations-text-greeting⧽

⧼Centralnotice-B16_WMCH_translations-text-main-long⧽

⧼Centralnotice-B16_WMCH_translations-text-thank-you-long⧽

               ⧼Centralnotice-B16_WMCH_translations-now-is-the-time⧽

       <form id="frb-donation-form" method="GET" name="donationForm">
     
           <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" class="paypal-field" name="cmd" value="_donations" />
           <input type="hidden" class="paypal-field" name="business" value="F4T8UMB5PVU9Q" />
           <input type="hidden" class="paypal-field" name="currency_code" value="CHF" />
           <input type="hidden" class="paypal-field" name="lc" value="de" />
           <input type="hidden" class="paypal-field" name="item_name" value="Spende an Wikimedia" />
     
           <fieldset class="frb-amounts cf">
     
               <legend>⧼Centralnotice-B16_WMCH_translations-select-amount⧽</legend>
     

• <input name="amount" type="radio" id="amount1" value="5"> <label id="amount_label_1" for="amount1">5.-</label>
• <input name="amount" type="radio" id="amount2" value="20"> <label id="amount_label_2" for="amount2">20.-</label>
• <input name="amount" type="radio" id="amount3" value="50"> <label id="amount_label_3" for="amount3">50.-</label>
• <input name="amount" type="radio" id="amount4" value="100"> <label id="amount_label_4" for="amount4">100.-</label>
• <input name="amount" type="radio" id="amount5" value="200"> <label id="amount_label_5" for="amount5">200.-</label>
• <input name="amount" type="radio" id="frb-amt-other" value="Other"> <label id="frb-amt-other-label" onclick="$('#frb-amt-other').prop('checked', true);"> <input type="number" min="0" step="0.01" name="amountGiven" id="frb-amt-other-input" placeholder="⧼Centralnotice-FR2015_translations-other⧽" autocomplete="off" onfocus="$('#amountother').prop('checked', true);"> </label>

           </fieldset>
     
           <fieldset class="frb-submit cf">
     
               <legend>⧼Centralnotice-B16_WMCH_translations-select-payment-method⧽</legend>
     

• <button class="frb-btn paymentmethod-cc"> ⧼Centralnotice-FR2015_translations-pm-creditcard⧽ </button>
• <button class="frb-btn paymentmethod-pp"> ⧼Centralnotice-FR2015_translations-pm-paypal⧽ </button>
• <button class="frb-btn paymentmethod-slip"> ⧼Centralnotice-B16_WMCH_translations-paymentslip-text⧽ </button>

                   Wikimedia CH, 8008 Zürich / 
                   IBAN: CH13 0900 0000 85 359089 1

           </fieldset>
     
       </form>

           ⧼Centralnotice-B16_WMCH_translations-privacy-text⧽

       
            Schließen
            
       

<img src="//upload.wikimedia.org/wikipedia/donate/9/99/RedInfoI.svg" alt="Red info icon"> If everyone reading this donated %MINIMUM%, we could keep Wikipedia thriving for years to come.

Support Wikipedia

   <button class="frb-btn frb-btn-btxt">⧼Centralnotice-FR2015_translations-donate-now⧽</button>
   

<script> /* Allow overriding country */ if( mw.util.getParamValue("country") ) {

   Geo.country = mw.util.getParamValue("country");

}

var frb = frb || {};

frb.showLargeBanner = function() {

   $('#content_wrapper').prepend($('#frb'));
   $('#frb-window').css('top', $(window).scrollTop() + 20); // position banner where they have scrolled to
   $('#frb').show();

};

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;

};

$(document).ready(function() {

   var donationForm = document.donationForm;

   $( '.paymentmethod-cc' ).click( function() {
       if( frb.validateForm() ) {
           donationForm.action = '⧼Centralnotice-B16_WMCH_translations-creditcard-link⧽';
           $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
           donationForm.submit();
       } else {
           alert( "⧼Centralnotice-B16_WMCH_translations-amount-alert⧽" );
           return false;
       }
   });

   $( '.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( "⧼Centralnotice-B16_WMCH_translations-amount-alert⧽" );
           return false;
       }
   });

   $( '.paymentmethod-slip' ).click( function() {
       donationForm.action = '⧼Centralnotice-B16_WMCH_translations-paymentslip-link⧽';
       $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
       donationForm.submit();
   });

   // Reset "other box" if they click a different amount
   $('#amount1, #amount2, #amount3, #amount4, #amount5').click(function() {
       $('#frb-amt-other-input').val();
   });

   $('.frb-close').click(function() {
       // Don't set a hide cookie here, as we expect them to always close this
       $("#frb").hide();
   });

   /* Close large banner when clicked outside */
   $('#frb-mask').on('click.bannerHide', function(e) {
       if ($(e.target).closest("#frb-window").length === 0) {
           $("#frb").hide();
           $(document).unbind('click.bannerHide');
       }
   });

   /* 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.showLargeBanner();
   }

}); </script>