MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad

<a href="https://itunes.apple.com/de/artist/christian-wolf/id903688769/"><img src="//hurraki.de/w/images/7/74/Leichte_Sprache_App_Apple_banner.jpg" title="Leichte Sprache App für iPhone und iPad" style="border: none; float: middle; width: 800px; height: 221px; margin-right: .8em; vertical-align: middle;" /></a> <a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Schließen" /></a>

---

<style> /* Clearfix */

1. frbanner .cf:before,
2. frbanner .cf:after {

  content: "";
  display: table; }

1. frbanner .cf:after { clear: both; }

.ie7 #frbanner .cf { zoom: 1; }

/* Border-Box */

1. frbanner *,
2. frbanner *:before,
3. frbanner *:after {

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

/* Transitions */

1. frbanner * {

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

1. frbanner {

   top: 0 !important;
   width: 100%;
   }

/* frbanner-window Styles

---

*/

1. frbanner-window {

   background: #fff;
   width: 90%;
   top: 20px !important;
   left: 5% !important;
   -moz-box-shadow:    0 0 10px rgba(90,97,98,.25);
   -webkit-box-shadow: 0 0 10px rgba(90,97,98,.25);
   box-shadow:         0 0 10px rgba(90,97,98,.25);
   position: absolute;
   }

   @media (min-width : 330px)                                { #frbanner-window { width: 90%; left: 5% !important; }}
   @media (min-width : 370px)                                { #frbanner-window { width: 92%; left: 4% !important;  }}
   @media (min-width : 570px) and (orientation : landscape)  { #frbanner-window { width: 94%; left: 3% !important; }}
   @media (min-width : 640px) and (orientation : landscape)  { #frbanner-window { width: 94%; left: 3% !important; }}
   @media (min-width : 650px) and (orientation : portrait)   { #frbanner-window { width: 60%; left: 20% !important; top: 40px !important;}}
   @media (min-width : 650px) and (orientation : landscape)  { #frbanner-window { width: 80%; left: 10% !important; top: 100px !important;}}

1. frbanner-close {

   background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
   width: 20px;
   height: 21px;
   display: block;
   cursor: pointer;
   position: absolute;
   right: 10px;
   top: 10px;
   opacity: .6;
   text-indent: -99999px;
   z-index: 999;
   }

   @media (min-width : 370px) { #frbanner-close { width: 15px; height: 16px; background-size: 75%; right: 5px; top: 5px; } }
   @media (min-width : 570px) { #frbanner-close { width: 20px; height: 21px; background-size: 100%; right: 10px; top: 10px;} }

1. frbanner-close:active {

   opacity: 1;
   }

/* --- Branding --- */

.frbanner-logo {

   width: 60%;
   margin: 0 20% 10px;
   text-align: center;
   }

   @media (min-width : 650px) { .frbanner-logo { margin-bottom: 20px; }}

.frbanner-logo img {

   width: 110px;
   opacity: .4;
   }

   @media (min-width : 330px) { .frbanner-logo img { width: 132px; }}
   @media (min-width : 370px) { .frbanner-logo img { width: 110px; }}
   @media (min-width : 490px) { .frbanner-logo img { width: 132px; }}

/* --- Message --- */

1. frbanner-window .frbanner-message {

   text-align: left;
   padding: 15px;
   font: .8em/1.1em "Helvetica Neue Light",Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 200;
   color: #3c3c3c;
   }

   @media (min-width : 330px)                                { #frbanner-window .frbanner-message { padding: 20px; font-size: .95em; } }
   @media (min-width : 370px) and (orientation : landscape)  { #frbanner-window .frbanner-message { padding: 15px; width: 63%; float: left; font-size: .75em; line-height: 1.2em; } }
   @media (min-width : 570px) and (orientation : landscape)  { #frbanner-window .frbanner-message { padding: 20px; width: 65%; float: left; font-size: .9em; } }
   @media (min-width : 650px) and (orientation : portrait)   { #frbanner-window .frbanner-message { padding: 30px; font-size: 1.15em; line-height: 1.3em; } }
   @media (min-width : 650px) and (orientation : landscape)  { #frbanner-window .frbanner-message { padding: 30px; width: 66%; float: left; font-size: 1.2em; line-height: 1.3em; } }

1. frbanner-window .frbanner-message p { margin-bottom: .5em; }

1. frbanner-window .frbanner-message p:last-child { margin-bottom: 0; }

1. frbanner-window .frbanner-message strong {

   font-family: "Helvetica Neue Bold",Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 600;
   }

1. frbanner-window .frbanner-message .highlight { background: #fff000; font-weight: bold; }
2. frbanner-window .frbanner-message .highlight span { position: relative; } /* prevent background from overlapping text */

/* --- Form --- */

1. frbanner-form {

   background: #e2e2e2;
   padding: 10px 15px 10px;
   position: relative;
   }

   @media (min-width : 330px)                                { #frbanner-form { padding: 15px 20px 10px; } }
   @media (min-width : 370px) and (orientation : landscape)  { #frbanner-form { padding: 20px 15px 15px; width: 37%; float: right; height: 250px;  }}
   @media (min-width : 570px) and (orientation : landscape)  { #frbanner-form { padding: 30px 20px 20px; width: 35%; float: right; height: 290px; }}
   @media (min-width : 650px) and (orientation : portrait)   { #frbanner-form { padding: 30px; } }
   @media (min-width : 650px) and (orientation : landscape)  { #frbanner-form { padding: 30px; width: 34%; float: left; height: 435px; } }

1. frbanner-form:before {

   height: 0;
   width: 0;
   margin-left: -10px;
   content: " ";
   position: absolute;
   left: 50%;
   top: 0;
   border-color: rgba(255, 255, 255, 0);
   border: solid transparent;
   pointer-events: none;
   border-top-color: white;
   border-width: 10px;
   }

   @media (min-width : 370px) and (orientation : landscape) {
       #frbanner-form:before  {
           border-left-color: white;
           left: 0;
           top: 50%;
           margin: 0;
           border-color: rgba(255, 255, 255, 0);
           border: solid transparent;
           pointer-events: none;
           border-left-color: white;
           border-width: 10px;
           }}

.frbanner-amounts, .frbanner-submit {

   width: 100%;
   overflow: auto;
   zoom: 1;
   margin: 0 auto;
   padding: 0;
   }

.frbanner-amounts { margin-bottom: 10px; }

   @media (min-width : 370px)  { .frbanner-amounts { margin-bottom: 12px; }}
   @media (min-width : 570px)  { .frbanner-amounts { margin-bottom: 15px; }}
   @media (min-width : 650px)  { .frbanner-amounts { margin-bottom: 30px;} }

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

   display: block;
   width: 32%;
   float: left;
   clear: none;
   margin: 0 2% 6px 0;
   }

   @media (min-width : 370px) and (orientation : landscape) { .frbanner-amounts li, .frbanner-submit li  { width: 48%; margin-right: 4%;} }
   @media (min-width : 650px)  {  .frbanner-amounts li, .frbanner-submit li { margin-bottom: 10px; } }

.frbanner-amounts li:last-child, .frbanner-submit li:last-child { margin-right: 0; }

   @media (orientation : portrait)   { .frbanner-amounts li#amount_total_3, .frbanner-amounts li#amount_total_6  { margin-right: 0; }}
   @media (orientation : landscape)  { .frbanner-amounts li#amount_total_2, .frbanner-amounts li#amount_total_4  { margin-right: 0; }}

.frbanner-submit li, .frbanner-amounts li#amount_total_5, .frbanner-amounts li#amount_total_6 {

   margin-bottom: 0;
   }

   @media (orientation : portrait)   { .frbanner-amounts li#amount_total_4  { margin-bottom: 0; }}
   @media (min-width : 650px)        { .frbanner-submit .pm-credit-card { margin-bottom: 10px; } }

.frbanner-submit li { width: 48%; margin-right: 4%;}

/* Stack in landscape */ @media (orientation : landscape) {

   .frbanner-submit .pm-credit-card,
   .frbanner-submit .pm-paypal { 
       margin-bottom: 6px; margin-right: 0; width: 100%;
   }

}

li.subhead {

   width: 100%;
   margin: 0;
   text-align: center;
   font-size: 11px;
   text-transform: uppercase;
   color: #7c7c7c;
   }

   @media (min-width : 330px) { li.subhead { font-size: 12px; }}
   @media (min-width : 370px) { li.subhead { font-size: 11px; }}
   @media (min-width : 570px) { li.subhead { font-size: 12px; }}
   @media (min-width : 650px) { li.subhead { font-size: 15px; margin-bottom: 5px; } }

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

.frbanner-amounts li label {

   display: block;
   width: 100%;
   height: 32px;
   padding: 5px;
   font: 1.2em/22px "Helvetica Neue Roman", Arial, Helvetica, sans-serif;
   font-style: normal;
   font-weight: 300;
   text-align: center;
   background: #367fb4;
   border:none;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;
   color: #fff;
   cursor: pointer;
   outline: 0;
   backface-visibility: hidden;
   }

   @media (min-width : 330px) { .frbanner-amounts li label { height: 40px; font-size: 1.3em; line-height: 30px; }}
   @media (min-width : 370px) { .frbanner-amounts li label { height: 28px; font-size: 1em; line-height: 18px; }}
   @media (min-width : 570px) { .frbanner-amounts li label { height: 28px; font-size: 1em; line-height: 18px; }}
   @media (min-width : 650px) { .frbanner-amounts li label { height: 50px; font-size: 1.4em; line-height: 40px; }}

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

   background: #0f4b76;
   }

1. frbanner-window li.frbanner-submit {

   display: block;
   margin:0;
   }

/*-- Payment method buttons --*/

1. frbanner-window button {

   background-repeat: no-repeat;
   background-position: center center;
   background-size: 80%;
   background-color: #e7e7e7;
   border: none;
   width: 100%;
   height: 40px;
   padding: 5px;
   line-height: 1;
   font-size: .9em;
   text-transform: uppercase;
   color: #367fb4;
   cursor: pointer;
   -moz-border-radius:    4px;
   -webkit-border-radius: 4px;
   border-radius:         4px;
   -moz-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   box-shadow: 0 0 2px rgba(0,0,0,.2), inset 0 14px 16px rgba(255,255,255,.75), inset 0 0 7px #fff;
   }

   @media (min-width : 330px) { #frbanner-window button { height: 50px; font-size: 1em; line-height: 1; }}
   @media (min-width : 370px) { #frbanner-window button { height: 30px; font-size: 1em; line-height: 1; }}
   @media (min-width : 570px) { #frbanner-window button { height: 40px; font-size: 1em; line-height: 30px; }}
   @media (min-width : 650px) { #frbanner-window button { height: 60px; font-size: 1.1em; line-height: 1; background-size: 60%; }}

1. frbanner-window button:active {

   background-color: #f9f9f9;
   -moz-box-shadow:    0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   -webkit-box-shadow: 0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   box-shadow:         0 0 2px rgba(0,0,0,.2), inset 1px 1px 3px rgba(0,0,0,.3), inset 0 0 7px #fff;
   }

1. frbanner-window .pm-paypal button,
2. frbanner-window .pm-amazon button {

   text-indent: -99999px;
   }

1. frbanner-window .pm-ideal button { text-transform: none; }

1. frbanner-window .pm-paypal button { background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg'); }
2. frbanner-window .pm-amazon button { background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg'); }

/* -- Smallprint -- */

1. frbanner-window #frbanner-smallprint {

   width: 100%;
   font-size: 75%;
   padding: 5px 20px;
   background: #e2e2e2;

}

/* -- Bottom banner -- */

1. frbanner2 {

 width: 100%;
 position: fixed;
 left: 0;
 bottom: 0;
 cursor: pointer; 
 text-align: center;
 z-index: 100;

}

1. frbanner2 * {

 -webkit-transition: all .3s ease-in-out;
 -moz-transition:    all .3s ease-in-out;
 -o-transition:      all .3s ease-in-out;
 -ms-transition:     all .3s ease-in-out;
 transition:         all .3s ease-in-out; }
 

1. frbanner2 .frbanner2-tab {

 background: #ffcc00;
 width: 180px;
 margin: 0 auto;
 padding: .3em .8em 0 .8em;
 display: block;
 position: relative;
 top: .3em;
 -moz-border-radius:    4px 4px 0 0;
 -webkit-border-radius: 4px 4px 0 0;
 border-radius:         4px 4px 0 0;
 font-size: .9em;
 color: #1c1c1c;
 font-weight: bold;
 cursor: pointer; }

1. frbanner2:hover .frbanner2-tab { background: #ffdd00; }
2. frbanner2 .frbanner2-tab img {

 float: left;
 margin: .25em .15em 0 0; }

1. frbanner2 p {

 background: #ffcc00;
 padding: .7em;
 margin: 0;
 font-size: .8em;
 line-height: 1.1;
 color: #1c1c1c;
 text-align: center; }

1. frbanner2:hover p { background: #ffdd00; }

1. frbanner2-close {

   background: url('//upload.wikimedia.org/wikipedia/donate/c/cf/Close-trilogy.png') no-repeat center center;
   width: 1em;
   height: 1em;
   background-size: contain;
   float: right;
   display: block;
   cursor: pointer;
   text-indent: -99999px;
   z-index: 999;
   margin-left: 0.5em;

} </style>

       <section id="modal-signup" class="cf">

<img src="//upload.wikimedia.org/wikipedia/donate/6/63/Wikipedia-logotype.png" alt="Wikipedia Logo">

DEAR WIKIPEDIA READERS:

To protect our independence, we'll never run ads. We take no government funds. We survive on donations averaging about €10. Now is the time we ask. If everyone reading this right now gave €2, our fundraiser would be done within an hour. We’re a small non-profit with costs of a top 5 website: servers, staff and programs. Wikipedia is something special. It is like a library or a public park where we can all go to think and learn. If Wikipedia is useful to you, take one minute to keep it online and ad-free another year.

Thank you.

           <form id="frbanner-form" method="post" name="paypalcontribution">
               <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" name="referrer" value="">
               <input type="hidden" name="returnto" value="">
               <input type="hidden" name="language" value="">
               <input type="hidden" name="country" value="">
               <input type="hidden" name="currency_code" id="input_currency_code" value="EUR">
               <input type="hidden" name="utm_key" value="">
               <input type="hidden" name="payment_method" value="">

1. Select an amount
2. <input name="amount" type="radio" id="amount1" value="2"> <label id="amount_label_1" for="amount1">€2</label>
3. <input name="amount" type="radio" id="amount2" value="10"> <label id="amount_label_2" for="amount2">€10</label>
4. <input name="amount" type="radio" id="amount3" value="20"> <label id="amount_label_3" for="amount3">€20</label>
5. <input name="amount" type="radio" id="amount4" value="30"> <label id="amount_label_4" for="amount4">€30</label>
6. <input name="amount" type="radio" id="amount5" value="50"> <label id="amount_label_5" for="amount5">€50</label>
7. <input name="amount" type="radio" id="amount6" value="100"> <label id="amount_label_6" for="amount6">€100</label>

1. Select a payment method
2. <button onclick="fundraisingBanner.redirectPayment('cc'); return false;"> Credit Card </button>
3. <button onclick="fundraisingBanner.redirectPayment('paypal'); return false;"> PayPal </button>

           </form>

               By donating, you are agreeing to our <a target="_blank" href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Donor_policy">donor privacy policy</a> and to sharing your information with the <a target="_blank" href="https://wikimediafoundation.org/wiki/Special:LandingCheck?basic=true&landing_page=Tax_Deductibility">Wikimedia Foundation</a> and its service providers in the U.S. and elsewhere.

       </section>

       <img src="//upload.wikimedia.org/wikipedia/donate/d/da/Arrow-up-1.png">Please donate now

If everyone reading this gave €2, we could keep Wikipedia online & ad-free another year.

MediaWiki:FR2013/Resources/Country2Currency.js MediaWiki:FR2013/Resources/MobileBanner.js

<script> $(document).ready(function() {

   $("#frbanner-close").click(function() {
       $("#frbanner").hide();
   });

   $("#frbanner2").click(function() {
       window.scrollTo(0,0);
       $("#frbanner").show();
       $("#frbanner2").slideToggle();
   });

   $("#frbanner2-close").click(function() {
       mw.centralNotice.hideBanner();
   });

   if (!mw.centralNotice.bannerData.hideResult) {
       // Show the correct sub-banner
       if (mw.centralNotice.bannerData.cookieCount === 1) {
           $('#frbanner').show();
       } else if (mw.centralNotice.bannerData.cookieCount > 1) {
           $('#frbanner2').show();
       }
   }

}); </script>