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

Aus Hurraki - Wörterbuch für Leichte Sprache
Wechseln zu: Navigation, Suche
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, 16:02 Uhr

<a href="https://itunes.apple.com/de/artist/christian-wolf/id903688769/"></a> <a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;">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>