MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen

Aus Hurraki - Wörterbuch für Leichte Sprache
Zur Navigation springen Zur Suche springen
Keine Bearbeitungszusammenfassung
Keine Bearbeitungszusammenfassung
Zeile 5: Zeile 5:




----------<style>
----------{{MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js
/* --- Close Options --- */
| hide-cookie-name      = centralnotice_bannercount_fr12
| hide-cookie-show-count = 5
| hide-cookie-wait-count = 0
| hide-cookie-wait-delay = 2592000
}}


#cnotice-toggle-box-options {
<style>
     display: table-cell;
/* Clearfix */
     font-size: .8em;
 
#frbanner .cf:before,
#frbanner .cf:after {
  content: "";
  display: table; }
 
#frbanner .cf:after { clear: both; }
 
.ie7 #frbanner .cf { zoom: 1; }
 
 
 
/* Border-Box */
 
#frbanner *,
#frbanner *:before,
#frbanner *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    }
 
 
/* Transitions */
 
#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;
    }
 
#frbanner {
    top: 0 !important;
    width: 100%;
    }
 
/* frbanner-window Styles
------------------------------------ */
 
#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;}}
 
#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;} }
 
 
#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 --- */
 
#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; } }
 
 
#frbanner-window .frbanner-message p { margin-bottom: .5em; }
 
#frbanner-window .frbanner-message p:last-child { margin-bottom: 0; }
 
#frbanner-window .frbanner-message strong {
    font-family: "Helvetica Neue Bold",Arial, Helvetica, sans-serif;
    font-style: normal;
    font-weight: 600;
    }
 
#frbanner-window .frbanner-message .highlight { background: #fff000; font-weight: bold; }
#frbanner-window .frbanner-message .highlight span { position: relative; }  /* prevent background from overlapping text */
 
 
/* --- Form --- */
 
#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; } }
 
 
#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;
     text-transform: uppercase;
     width: 38px;
    color: #7c7c7c;
     height: 38px;
    }
 
    @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;
    }


    background: #eee;
#frbanner-window li.frbanner-submit {
    -moz-border-radius: 19px;
     display: block;
     -webkit-border-radius: 19px;
     margin:0;
     border-radius: 19px;
     }
     vertical-align: middle;
 
}
/*-- Payment method buttons --*/


#cnotice-toggle-box {
#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;
     cursor: pointer;
     position: absolute;
     -moz-border-radius:    4px;
     top: 2px;
    -webkit-border-radius: 4px;
     right: 3px;
    border-radius:         4px;
     z-index: 1;
     -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%; }}
 
#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;
    }
 
#frbanner-window .pm-paypal button,
#frbanner-window .pm-amazon button {
    text-indent: -99999px;
    }
 
#frbanner-window .pm-ideal button { text-transform: none; }
 
#frbanner-window .pm-paypal button { background-image: url('//upload.wikimedia.org/wikipedia/donate/8/8d/Paypal-color.svg'); }
#frbanner-window .pm-amazon button { background-image: url('//upload.wikimedia.org/wikipedia/donate/e/e4/Amazon-color.svg'); }
 
/* -- Smallprint -- */
 
#frbanner-window #frbanner-smallprint {
     width: 100%;
    font-size: 75%;
    padding: 5px 20px;
    background: #e2e2e2;
}
}


body.rtl #cnotice-toggle-box {
/* -- Bottom banner -- */
    left: 3px;
 
    right: unset;
#frbanner2 {
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  cursor: pointer;
  text-align: center;
  z-index: 100;
}
}
#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; }
 
#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; }
#frbanner2:hover .frbanner2-tab { background: #ffdd00; }
#frbanner2 .frbanner2-tab img {
  float: left;
  margin: .25em .15em 0 0; }
#frbanner2 p {
  background: #ffcc00;
  padding: .7em;
  margin: 0;
  font-size: .8em;
  line-height: 1.1;
  color: #1c1c1c;
  text-align: center; }
#frbanner2:hover p { background: #ffdd00; }


#cnotice-toggle-box:hover {
#frbanner2-close {
     opacity: 1;
    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>
</style>
<div id="wda-banner {{{banner}}}" class="plainlinks" style="background: #990000; text-align: justify; padding:7px;">
  <div class="nomobile" style="float:left; width: 20%; margin-top: 20px; margin-left: 20px; text-align:center; color: #fff; font-weight:bold; font-size:140%; font-family: 'Space Mono', 'Times New Roman', serif;">Wissen fängt <br />mit <img alt="W" src="//upload.wikimedia.org/wikipedia/commons/thumb/7/7a/Wikipedia-W-bold-White.svg/38px-Wikipedia-W-bold-White.svg.png" width="38" height="38"> an.</div><div style="float:right;"><a href="https://de.wikipedia.org/wiki/Wikipedia:WikiCon_2018/Anmeldung"><img alt="WikiCon 2018" src="//upload.wikimedia.org/wikipedia/commons/thumb/6/6a/WikiCon-Logo-2018-red-square_%28quer%29.png/240px-WikiCon-Logo-2018-red-square_%28quer%29.png" width="240" height="115"></a></div><br /><div style="max-width:1280px; margin: 12px auto; text-align: center; font-size: 14pt; position: relative; font-family: 'Space Mono', 'Times New Roman', serif;"><a href="https://de.wikipedia.org/wiki/Wikipedia:WikiCon_2018/Anmeldung" style="color: white;">WikiCon&nbsp;2018: 5.&nbsp;– 7.&nbsp;Oktober 2018 in St.&nbsp;Gallen<br />&gt;&gt;&nbsp;Jetzt&nbsp;anmelden!&nbsp;&lt;&lt;</a></div><div style="clear: both;">
  </div>


  <div id="cnotice-toggle-box"> <a href="#" title="{{int:centralnotice-shared-hide}}" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/donate/a/ac/Close_oojs.png" alt="{{int:centralnotice-shared-hide}}" /></a>  
<div id="frbanner" style="display: none;"><!-- the "full screen" banner -->
  </div>
 
    <div id="frbanner-mask" style="position: absolute; z-index: 1000; opacity: 0.8; top: 0px; left: 0px; width: 100%; height: 100%; background-color: rgb(0, 0, 0);"></div>
 
 
    <div id="frbanner-window" style="z-index: 1001;">
 
        <div id="frbanner-close" onclick="fundraisingBanner.hide()"></div>
 
        <section id="modal-signup" class="cf">
 
            <div class="frbanner-message">
 
                <div class="frbanner-logo"><img src="//upload.wikimedia.org/wikipedia/donate/6/63/Wikipedia-logotype.png" alt="Wikipedia Logo"></div>
 
                <p><strong>DEAR WIKIPEDIA READERS:</strong></p>
                <p>To protect our independence, we'll never run ads. We take no government funds. <span class="highlight"><span>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.</span></span> 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.</p>
                <p><i>Thank you.</i></p>
 
            </div><!--frbanner-message-->
 
 
            <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="">
 
                <ol class="frbanner-amounts cf">
 
                    <li class="subhead">Select an amount</li>
 
                    <li id="amount_total_1">
                        <input name="amount" type="radio" id="amount1" value="2">
                        <label id="amount_label_1" for="amount1">€2</label>
                    </li>
 
                    <li id="amount_total_2">
                        <input name="amount" type="radio" id="amount2" value="10">
                        <label id="amount_label_2" for="amount2">€10</label>
                    </li>
 
                    <li id="amount_total_3">
                        <input name="amount" type="radio" id="amount3" value="20">
                        <label id="amount_label_3" for="amount3">€20</label>
                    </li>
 
                    <li id="amount_total_4">
                        <input name="amount" type="radio" id="amount4" value="30">
                        <label id="amount_label_4" for="amount4">€30</label>
                    </li>
 
                    <li id="amount_total_5">
                        <input name="amount" type="radio" id="amount5" value="50">
                        <label id="amount_label_5" for="amount5">€50</label>
                    </li>
 
                    <li id="amount_total_6">
                        <input name="amount" type="radio" id="amount6" value="100">
                        <label id="amount_label_6" for="amount6">€100</label>
                    </li>
 
                </ol>
 
                <ol class="frbanner-submit cf">
 
                    <li class="subhead">Select a payment method</li>
 
                    <li class="pm-credit-card">
                        <button onclick="fundraisingBanner.redirectPayment('cc'); return false;">
                            Credit Card
                        </button>
                    </li>
 
                    <li class="pm-paypal">
                        <button onclick="fundraisingBanner.redirectPayment('paypal'); return false;">
                            PayPal
                        </button>
                    </li>
 
                </ol>
 
            </form>
 
            <div class="frbanner-message" id="frbanner-smallprint">
                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.
            </div>
 
        </section><!--modal-signup-->
 
    </div><!--frbanner-window-->
 
</div><!--frbanner-->
 
<div id="frbanner2" style="display: none;"><!-- the small banner -->
    <div class="frbanner2-tab">
        <img src="//upload.wikimedia.org/wikipedia/donate/d/da/Arrow-up-1.png">Please donate now
    </div>
    <p>
        <span id="frbanner2-close"></span>
        If everyone reading this gave €2, we could keep Wikipedia online &amp; ad-free another year.
    </p>  
</div>
</div>
{{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>

Version vom 10. September 2018, 15:02 Uhr

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



MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js

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


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>