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 1: Zeile 1:
<!-- Large mobile banner. Must be used with "Large banner limit and switch" mixin -->
<style type="text/css">{{MediaWiki:WMDE_FR2015/Resources/DesktopBanner.css}}</style>
<style>
<style type="text/css">{{MediaWiki:WMDE_FR2015/Resources/icon.css}}</style>
/* Clearfix */
<style type="text/css">{{MediaWiki:WMDE_FR2015/Resources/wlightbox.css}}</style>
.frb .cf:before,
<script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/BannerValues.js}}</script>
.frb .cf:after {
<script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/DesktopBanner.js
  content: "";
| donations-date-base      = ' + window.GlobalBannerSettings['donations-date-base'] + '
  display: table;
| donations-collected-base  = ' + window.GlobalBannerSettings['donations-collected-base'] + '
}
| donators-base            = ' + window.GlobalBannerSettings['donators-base'] + '
| appr-donations-per-minute = ' + window.GlobalBannerSettings['appr-donations-per-minute'] + '
| appr-donators-per-minute  = ' + window.GlobalBannerSettings['appr-donators-per-minute'] + '
}}
</script>
<script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/CountCampaignDays.js
| campaign-start-date = 2016-11-09
}}
</script>
<script type="text/javascript">{{MediaWiki:WMDE_FR2015/Resources/CustomDayName.js}}</script>
<script type="text/javascript">{{MediaWiki:WMDE_FR2016/Resources/wlightbox.js}}</script>
<style type="text/css">
  #WMDE_Banner-facts {
    background-color:#2b8156;
  }


.frb .cf:after { clear: both; }
  #WMDE_Banner_info {
    color: #ffffff;
  }


/* Box-sizing */
  #WMDE_Banner-text {
.frb,
     text-align:left;
.frb *,
     color: #ffffff;
.frb *:before,
  }
.frb *:after {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
    box-sizing: border-box;
}


/* Common styles */
  #WMDE_Banner-text-salute {
.frb label,
    color: #ffffff;
.frb button,
    font-size: 17px;
.frb input {
     font-weight: bold;
     font-family: inherit;
     line-height: 1.2em;
     -webkit-transition: all .2s ease-in-out;
    margin: 4px 10px 4px 35px;
     -moz-transition:   all .2s ease-in-out;
    text-align: justify;
     transition:         all .2s ease-in-out;
     margin-bottom: 0;
}
     padding-bottom: 0;
  }


/* Main banner
#WMDE_BannerForm-wrapper {
------------------------------------ */
    background-color: #ffffff;
    padding: 0 10px;
  }


#frb {
#WMDE_Banner-form fieldset {
     position: absolute;
     width: 95%;
     top: 0 !important;
     border: 0;
     left: 0;
     margin: 0 auto;
     width: 100%;
     padding: 0 0.5em 0.5em 0.5em;
    height: 100%;
    font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
}
}


#frb-mask {
#WMDE_Banner-frequency ul,
    position: absolute;
#WMDE_Banner-amounts ul,
    z-index: 1000;
#WMDE_Banner-payment ul {
    top: 0;
    left: 0;
     width: 100%;
     width: 100%;
     height: 100%;
     height: 100%;
     background-color: black;
     display: table;
     opacity: 0.8;
     margin: 0 0 0.3em;
    padding: 0;
    list-style: none;
}
}


#frb-window {
#WMDE_Banner-form legend {
     position: relative;
     display: none;
    top: 0;
    left: 0;
    right: auto;
     width: 100%;
     width: 100%;
     margin-top: 0;
     margin: 0;
     color: #000;
    padding: 0 0 0.3em 0;
     background: #fff;
    text-align: center;
     font-size: .9em;
     color: rgba(0,0,0,0.42);
}
}


@media (min-width: 768px) {
/* --- Common Button Styles --- */
    #frb-window {
        margin-top: 20px;
        left: 5%;
        right: 5%;
        width: 90%;
    }
}


/* --- Message --- */
.WMDE_Banner-btn {
 
    background: #f8f9fa;
.frb-message {
    border: 1px solid #9aa0a7;
     font-size: 20px;
    border-radius: 2px;
     line-height: 1.3;
    padding: 11px 0;
     border: 5px solid #990000;
    width: 100%;
     border-bottom: 0;
     cursor: pointer;
     display: inline-block;
    margin: 0 1px;
     text-align: center;
     font-weight: bold;
}
}


.frb-message-text {
.WMDE_Banner-btn:hover {
     padding: 20px;
    background-color: #ffffff;
     font-weight: bold;
     color: #444444;
     border-color: #a2a9b1;
}
}


@media (min-width: 768px) {
.WMDE_Banner-btn.checked {
     .frb-message {
     background: #2a4b8d;
        font-size: 24px;
    border-color: #7d8389;
        line-height: 1.4;
     color: #ffffff;
     }
    .frb-message-text {
        padding: 48px 72px;
    }
}
}


@media (min-height: 1000px) {
#WMDE_Banner-payment .btn-payment-type {
     .frb-message {
     background: #f8f9fa;
        font-size: 24px;
    font-size: 0.9em;
     }
     color: #3366cc;
    .frb-message-text {
        padding: 48px 72px;
    }
}
}


.frb-message-text p {
/* --- Frequency Buttons --- */
    margin-bottom: 10px;
}


.frb-message-text p:last-child {
#WMDE_Banner-frequency li {
     margin-bottom: 0;
    display: table-cell;
    width: 33%;
    padding: 0 2% 0 0;
     vertical-align: top;
}
}
body.rtl #WMDE_Banner-frequency li { padding: 0 0 0 2%; }


 
#WMDE_Banner-frequency label {
/* Call to action */
     width: 100%;
.frb-cta {
     text-align: center;
    background: #990000;
    color: #fff;
    padding: 10px;
    font-weight: 400;
    font-size: 24px;
     display: block;
     display: block;
     margin: auto;
     font-size: .9em;
    width: 100%;
    position: relative;
}
}


@media (min-height: 1000px) {
/*@media (min-width : 1100px) { #WMDE_Banner-frequency label { font-size: .95em; } }*/
    .frb-cta {
@media (min-width : 1200px) {
        padding: 27px;
     /*#WMDE_Banner-frequency label {
    }
         font-size: 1em;
}
    }*/
@media (min-width : 1100px) {
    /*#WMDE_Banner-payment .WMDE_Banner-btn {
     .frb-cta {
        min-height: 2em !important;
         font-size: 33px;
     }
     }
    .WMDE_Banner-btn {
        padding: 4px 0;
    }*/
}
}


.frb-cta:after {
#WMDE_Banner-frequency input[type="radio"] {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
     position: absolute;
     position: absolute;
     left: 50%;
     width: 1px;
    top: 100%;
    height: 0;
    width: 0;
    margin-left: -10px;
    content: " ";
    border: solid transparent;
    border-top-color: #990000;
    border-width: 10px;
    pointer-events: none;
}
}


/* --- Amount Buttons --- */


/* --- Form --- */
#WMDE_Banner-amounts legend {
    display: block;


#frb-donation-form {
    position: relative;
    background: #fff;
    padding: 1.5em 1.5em 0em;
    clear: both;
}
}


@media (min-width: 768px) {
#WMDE_Banner-amounts li {
  #frb-donation-form {
    display: table-cell;
        padding: 2em 2em 1em 2em;
     width: 23%;
    }
     height: 100%;
}
 
#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 --- */
 
#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;
     clear: none;
     float: left;
     padding: 0 2% 0 0;
     margin-bottom: 6px;
     vertical-align: top;
     margin-right: 2%;
     font-weight: bold;
}
}
 
body.rtl #WMDE_Banner-amounts li {
body.rtl .frb-amounts ul li {
     padding: 0 0 0 2%;
     float: right;
    margin-right: 0;
    margin-left: 2%;
}
}


@media (min-width : 570px) { .frb-amounts ul li { margin-bottom: 10px; } }
/* Chrome specific - need to be floated for height 100% to work */
 
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Very small screen layout, 2 amount buttons per row */
     #WMDE_Banner-amounts li { float: left; }
@media (max-width: 374px) {
     body.rtl #WMDE_Banner-amounts li { float: right; }
 
     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 */
#WMDE_Banner-amounts li input[type="radio"] {
@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;
     border: 0;
     clip: rect(0 0 0 0);
     clip: rect(0 0 0 0);
Zeile 265: Zeile 185:
}
}


.frb-amounts li label {
#WMDE_Banner-amounts label {
    display: block;
     font-size: .9em;
    width: 100%;
     text-transform: none;
    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 : 800px)  { #WMDE_Banner-amounts .predefined_amount { font-size: 1em; } }
@media (min-width : 1100px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1.1em; } }*/


@media (min-width: 768px) {
/* --- Other Amount --- */
  .frb-amounts li label {
      font-size: 28px;
  }
}


#frb-form input[type="radio"]:checked + .frb-btn, #frb-form .frb-btn.checked {
#amount_custom .WMDE_Banner-btn {
     background-color: #2a4b8d;
     display: inline-block;
     color: #fff;
    height: 100%;
     border-color: #7d8389;
     width: 100%;
     padding: 0.2em 0 0.4em 0;
}
}


.frb-amounts li input[type="radio"]:checked + label,
#amount_custom label {
.frb-amounts li input[type="radio"].checked + label {
    display: block;
     background-color: #2a4b8d;
    height: auto;
     color: #fff;
    margin-bottom: 0.2em;
     border-color: #7d8389;
     font-size: .7em;
     line-height: 1;
     cursor: pointer;
}
}


/* --- Other amount --- */
#amount_custom input {
 
     width: 85%;
#frb-amt-other-input {
     font-size: .9em;
     margin: 0;
     padding: 11px .4em;
     padding: 0;
     background: transparent;
    border: none;
    width: 90%;
    color: #222222;
     text-align: center;
     text-align: center;
    direction: ltr;
     border: 1px solid #9aa0a7;
     border-radius: 0;
     margin: 0 1px;
    padding-left: 5%;
}
 
 
#frb-amt-other-input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
    color: #222222;
}
#frb-amt-other-input::-moz-placeholder { /* Firefox 19+ */
     color: #222222;
}
#frb-amt-other-input:-moz-placeholder { /* Firefox 18- */
    color: #222222;
}
#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;
}
}


#frb-amt-other-label {
#amount_custom .checked input {
     border: 1px solid #9aa0a7;
     background: #2a4b8d;
     color: #555;
     color: #ffffff;
    padding-left: 3px;
}
}


#frb-amt-other:checked + #frb-amt-other-label #frb-amt-other-input {
#amount_custom input:hover {
     color: #FFFFFF;
    box-shadow: 0 0 0 1px #3366cc inset;
    background-color: #ffffff;
    color: #444444;
     border-color: #a2a9b1;
}
}


/* --- Payment method Buttons --- */


/* --- Payment method buttons layout --- */
#WMDE_Banner-payment {
 
     padding-bottom: 0.25em;
 
/* "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 */
#WMDE_Banner-payment ul li {
@media (min-width: 768px) {
     display: table-cell;
     .frb-submit ul {
    padding: 0 2% 0 0;
        display: table;
     vertical-align: top;
        table-layout: fixed;
    width: 50%;
        width: 100%;
    margin-bottom: 4px;
     }
    .frb-submit ul li {
        display: table-cell;
        padding: 0 10px;
        vertical-align: top;
    }
}
}
 
body.rtl #WMDE_Banner-payment ul li {
 
    padding: 0 0 0 2%;
@media (min-width : 570px) {
    .frb-submit li {
        margin-bottom: 10px;
    }
}
}


/* --- Payment method buttons appearance --- */
#WMDE_Banner-window button {
 
.frb-submit .frb-btn {
    display: inline-block;
     width: 100%;
     width: 100%;
     padding: 0.8em 0.4em;
     height: 100%;
    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;
     font-size: .9em;
    float: none;
    font-family: inherit;
}
}


.frb-bankinfo span {
@media all and (min-width: 1px) and (max-width: 900px), all and (min-width: 1050px) and (max-width: 1200px) {
     white-space: nowrap;
  #WMDE_Banner-payment .btn-payment-type {
     min-height: 4em;
  }
}
}


.frb-footer {
@media all and (min-width: 1px) and (max-width: 1050px) {
  #WMDE_Banner-payment ul {
    margin: 0;
     width: 100%;
     width: 100%;
    font-size: 75%;
  }
    padding: 1em 20px;
    background: #e2e2e2;
    text-align: center;
    color: #3c3c3c;
}
 
 
/* --- Top bar --- */


.frb-topbar {
  #WMDE_Banner-payment ul li {
    background: #000;
     display: block;
     display: block;
    z-index: 999;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    text-align: right;
     width: 100%;
     width: 100%;
  }
}
}


@media (min-width: 375px) {
#WMDE_Banner div.active {
     .frb-topbar {
     text-decoration: underline;
        font-size: 16px;
    border-bottom: none;
     }
     background: transparent;
}
}


.frb-close,
#WMDE_Banner .highlight {
.frb-rml1-link {
     background-color: #ffdd5b;
     display: inline-block;
     color: #000000;
    padding: 8px;
    cursor: pointer;
    z-index: 999;
    vertical-align: middle;
     color: #ccc;
}
}


.frb-close:hover,
/* --- Donation meter --- */
.frb-rml1-link:hover {
    color: #fff;
}


/*Hover*/
#WMDE_Banner #donationMeterWrapper {
.frb-close:hover .frb-close-x g {
    margin: 0 10px 10px 35px;
    stroke: #fff;
}
}


.frb-rml1-link {
#WMDE_Banner-close {
     width: 60%;
     background-image: url('//upload.wikimedia.org/wikipedia/commons/c/cb/Close_x_-_black.png');
    border-right: 1px solid #666;
     background-color: transparent;
}
     background-size: 12px auto;
body.rtl .frb-rml1-link {
     border-right: 0;
     border-left: 1px solid #666;
}
}


.frb-close {
#application-of-funds-link {
     width: 38%;
     cursor: pointer;
    margin-left: 1.5em;
}
}


.frb-close-x {
#application-of-funds-link:hover {
     height: 14px;
     text-decoration: underline;
    width: 14px;
    margin-bottom: -2px;
}
}


@media screen and (min-width: 375px) {
#info-application-of-funds {
     .frb-close-x {
    width: 720px;
        margin-bottom: -1px;
     margin-top: -5px;
    }
}
}


.frb-close.bottom {
#info-application-of-funds hr {
    text-align: center;
     margin: 1.4em 0;
    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 {
#info-application-of-funds-footer {
     color: #fff;
     font-size: 0.8em;
}
}


@media (min-width: 768px) {
#info-application-of-funds-footer div {
    .frb-close.bottom {
     width: 49%;
        display: none;
     display: inline-block;
    }
}
 
 
/* Bottom "reminder" banner styles
------------------------------------ */
 
#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;
     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;
}
}


#frb-nag:hover {
#info-application-of-funds-footer a {
     text-decoration: none;
     color: #3366cc;
}
}


@media (min-width: 720px) {
</style>
    #frb-nag {
        font-size: 17px;
    }
}


#frb-nag.reveal {
<div id="WMDE_Banner">
    bottom: 0;
  <div style="box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);">
}
    <form id="WMDE_Banner-form" method="post" name="donationForm"
          action="https://spenden.wikimedia.de/donation/new?piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}">
      <table id="WMDE_Banner-facts">
        <tbody>
        <tr>
          <td>
            <table style="height: 100%" id="WMDE_Banner-message-wrapper">
              <tbody>
              <tr>
                <td style="height: 1%" valign="top">
                  <p id="WMDE_Banner-text-salute">{{{banner-text-salutation}}}</p>
                  <p id="WMDE_Banner-text">{{{banner-text}}}</p>
                </td>
              </tr>
              <tr>
                <td style="vertical-align:middle;" valign="center">
{{MediaWiki:WMDE_FR2016/Resources/ProgressBar
| size=32
| tip-type=round
| minFillWidth=100
| border-color=#FFDD5B
| fill-color=#FFDD5B
| background-color=#000000
| text-color-inner=#000000
| text-color-outer=#FFFFFF
| margin=40px 0
| text-inner-left=Nur noch <span id="numDaysLeft">1 Tag</span>
}}


#frb-nag img {
                </td>
    height: 17px;
              </tr>
    width: 17px;
              <tr>
}
                <td style="height: 1%; vertical-align: bottom;">
                  <div id="WMDE_Banner_info">
                    <div style="float: right;">
                            <span id="application-of-funds-link" data-href="#info-application-of-funds">Wohin&nbsp;geht&nbsp;meine&nbsp;Spende?</span>
                    </div>
                    <div>
                      <span class="binfo-ucase">Spendenkonto</span>
                      <span>Wikimedia Foerdergesellschaft</span>
                      <span>BIC</span>
                      <span class="binfo-bold">BFSWDE33BER</span>
                      <span>IBAN&nbsp;<span class="binfo-bold" style="margin: 0 0 0 10px;">DE33&nbsp;1002&nbsp;0500&nbsp;0001&nbsp;1947&nbsp;00</span></span>
                    </div>
                  </div>
                </td>
              </tr>
              </tbody>
            </table>
          </td>


#frb-nag .frb-btn {
          <td id="WMDE_BannerForm-wrapper">
    display: inline-block;
            <fieldset id="WMDE_Banner-frequency" class="cf">
    font-size: 12px;
              <div style="padding-top: 0.5em;" class="interval-options">
    padding: 3px 6px;
                <ul>
}
                  <li>
                    <input type="radio" id="interval_multiple" />
                    <label class="WMDE_Banner-btn donation-frequency" for="interval_onetime">
                      <input type="radio" id="interval_onetime">
                      einmalig
                    </label>
                  </li>
                  <li>
                    <label class="WMDE_Banner-btn donation-interval" for="interval1">
                      <input type="radio" id="interval1" name="interval" value="1">
                      monatlich
                    </label>
                  </li>
                  <li>
                    <label class="WMDE_Banner-btn donation-interval" for="interval12">
                      <input type="radio" id="interval12" name="interval" value="12">
                      jährlich
                    </label>
                  </li>
                </ul>
              </div>
            </fieldset>


.frb-nag-message {
            <fieldset id="WMDE_Banner-amounts" class="cf">
    vertical-align: middle;
              <ul>
    margin-bottom: 8px;
                <li id="amount_total_1">
    line-height: 1.1;
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_1" value="5">
}
                  <label id="amount_label_1" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_1">5 €</label>
.frb-nag-message:hover {
                </li>
    text-decoration: underline;
}


.frb-nag-close {
                <li id="amount_total_2">
    display: block;
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_2" value="15">
    border: 2px solid black;
                  <label id="amount_label_2" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_2">15 €</label>
    position: absolute;
                </li>
    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);
}


#frb-nag .frb-nag-message2 {
                <li id="amount_total_3">
    display: none;
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_3" value="25">
}
                  <label id="amount_label_3" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_3">25 €</label>
                </li>


/*!--- Focus styles ----*/
                <li id="amount_total_4">
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_4" value="50">
                  <label id="amount_label_4" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_4">50 €</label>
                </li>
              </ul>
              <ul>
                <li id="amount_total_5">
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_5" value="75">
                  <label id="amount_label_5" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_5">75 €</label>
                </li>


/*Outline reset*/
                <li id="amount_total_6">
.frb-close:focus,
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_6" value="100">
.frb-rml1-link:focus,
                  <label id="amount_label_6" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_6">100 €</label>
.frb-rml1-form input:focus,
                </li>
.frb-rml2-form input:focus,
.frb-btn:focus,
.frb-btn-submit:focus,
.frb-frq-switch:focus,
#frb-amt-other-input:focus {
    outline: 0;
}


.frb-rml2-form input:focus,
                <li id="amount_total_7">
.frb-frq-switch.is-active,
                  <input type="radio" name="betrag_auswahl" id="field-amount_total_7" value="250">
.frb-btn:focus,
                  <label id="amount_label_7" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_7">250 €</label>
.frb-rml2-form input:focus,
                </li>
.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*/
                <li id="amount_custom">
.frb-rml1-form input:focus {
                  <input type="text" name="amountGiven" id="amount-other-input" size="3" autocomplete="off" value="" placeholder="anderer">
    box-shadow: inset 0 0 0 1px #FFFFFF, inset 0 0 0 1px #36c;
                </li>
}
              </ul>
            </fieldset>


/*Focus styles*/
            <fieldset id="WMDE_Banner-payment" class="cf">
.frb-close:focus,
              <ul>
.frb-rml1-link:focus {
                <li>
    box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #36c;
                  <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('BEZ');">
}
                    Lastschrift
                  </button>
                </li>


.frb-btn-submit:focus,
                <li>
.frb-amounts input[type="radio"]:checked + label:focus,
                  <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('UEB');">
.frb-amounts input[type="radio"]:checked + .frb-btn:focus,
                    Überweisung
.frb-amounts input[type="radio"]:checked:focus + label,
                  </button>
.frb-amounts input[type="radio"]:checked:focus + .frb-btn,
                </li>
.frb-amt-other.is-focused .frb-btn {
              </ul>
    border-color: #36c;
              <ul>
    box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
                <li>
}
                  <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('MCP');">
                    Kreditkarte
                  </button>
                </li>


.frb-close:focus,
                <li>
.frb-rml1-link:focus {
                  <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('PPL');">
    color: #fff;
                    PayPal
}
                  </button>
                </li>


.frb-close:focus .frb-close-x g {
              </ul>
    stroke: #fff;
            </fieldset>
}
            <span id="WMDE_Banner-close" style="position: absolute; right: 0;">&nbsp;</span>
 
          </td>
</style>


<div id="frb" class="frb" style="display: none;">
        </tr>
        </tbody>
      </table>


     <div id="frb-mask"></div>
      <input type="hidden" id="periode" name="periode" value="0"/>
      <input type="hidden" id="intervalType" name="intervalType" value="0"/>
      <input type="hidden" id="impCount" name="impCount" value=""/>
      <input type="hidden" id="bImpCount" name="bImpCount" value=""/>
      <input type="hidden" id="zahlweise" name="zahlweise" value=""/>
     </form>
  </div>
  <img id="WMDE_Banner-close-ct" src="//upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" height="0" width="0">
</div>
<div class="wlightbox-contents">
  <div id="donationperiodInfo">
      <div class="container"><ul class="checks">
        <li>Jederzeit und ab sofort kündbar. Eine formlose E-Mail genügt.</li>
        <li>Betrag und Zahlungsintervall problemlos änderbar.</li>
        <li>Vergrößerte Planungssicherheit und Nachhaltigkeit.</li>
        <li>Automatischer Versand der Zuwendungsbestätigung. </li>
        <li>Auf Wunsch Versand unseres Tätigkeitsberichts.</li>
        </ul>
      </div>
  </div>
</div>


     <div id="frb-window" style="z-index: 1001;">
<div class="wlightbox-contents">
     <div id="info-application-of-funds">
        <div class="wlightbox-title clearfix">
            <span class="icon-bar-chart wlightbox-icon"></span>Wohin geht meine Spende?


        <div class="frb-topbar">
            <a href="http://wikimedia.de/wiki/Transparenz" target="_blank"><span class="logo-itz-white f-right no-margin"></span></a>
        </div>


            <span class="frb-close" tabindex="0">
        <p>
                {{int:Centralnotice-close-title}}
            <img src="//upload.wikimedia.org/wikipedia/commons/8/8a/WMDE-application-of-funds-diagram-2017.png" />
                <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>{{int:Centralnotice-close-title}}</title><g stroke="#CCC" fill="none" fill-rule="evenodd" stroke-linecap="round"><path d="M2 2l7 7M9 2L2 9"/></g></svg>
        </p>
            </span>


        <div>
            <img src="//upload.wikimedia.org/wikipedia/commons/0/00/WMDE-application-of-funds-2017.svg" />
         </div>
         </div>


         <div class="frb-message">
         <hr/>


            <div class="frb-message-text">
        <div id="info-application-of-funds-footer">
                <p>{{int:Centralnotice-B16_WMCH_translations-text-greeting}}</p>
            <div>
                 <p>{{int:Centralnotice-B16_WMCH_translations-text-main-long}}</p>
                 <a id="link-wmf-annual-plan" href="https://meta.wikimedia.org/wiki/Wikimedia_Foundation_Annual_Plan/2016-2017/Final" target="_blank">Erfahren Sie mehr zum Jahresplan<br>der Wikimedia Foundation</a>
                <p><i>{{int:Centralnotice-B16_WMCH_translations-text-thank-you-long}}</i></p>
             </div>
             </div>
 
             <div>
             <div class="frb-cta">
                 <a id="link-wmde-annual-plan" href="https://meta.wikimedia.org/wiki/Wikimedia_Deutschland/Jahresplanung_2017/Ziele,_Indikatoren_und_Wirtschaftsplan" target="_blank">Erfahren Sie mehr zum Jahresplan<br>von Wikimedia Deutschland</a>
                 {{int:Centralnotice-B16_WMCH_translations-now-is-the-time}}
             </div>
             </div>
        </div><!--frb-message-->
        <div class="frb-bottom">
        <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}}}">
     
            <!-- PayPal -->
            <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>{{int:Centralnotice-B16_WMCH_translations-select-amount}}</legend>
     
                <ul>
     
                    <li class="amount-btn" id="amount_total_1">
                        <input name="amount" type="radio" id="amount1" value="5">
                        <label id="amount_label_1" for="amount1">5.-</label>
                    </li>
     
                    <li class="amount-btn" id="amount_total_2">
                        <input name="amount" type="radio" id="amount2" value="20">
                        <label id="amount_label_2" for="amount2">20.-</label>
                    </li>
     
                    <li class="amount-btn" id="amount_total_3">
                        <input name="amount" type="radio" id="amount3" value="50">
                        <label id="amount_label_3" for="amount3">50.-</label>
                    </li>
     
                    <li class="amount-btn" id="amount_total_4">
                        <input name="amount" type="radio" id="amount4" value="100">
                        <label id="amount_label_4" for="amount4">100.-</label>
                    </li>
     
                    <li class="amount-btn" id="amount_total_5">
                        <input name="amount" type="radio" id="amount5" value="200">
                        <label id="amount_label_5" for="amount5">200.-</label>
                    </li>
     
                    <li class="frb-amt-other">
                        <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="{{int:Centralnotice-FR2015_translations-other}}" autocomplete="off" onfocus="$('#amountother').prop('checked', true);">
                        </label>
                    </li>
     
                </ul>
     
            </fieldset>
     
            <fieldset class="frb-submit cf">
     
                <legend>{{int:Centralnotice-B16_WMCH_translations-select-payment-method}}</legend>
     
                <ul>
     
                    <li>
                        <button class="frb-btn paymentmethod-cc">
                            {{int:Centralnotice-FR2015_translations-pm-creditcard}}
                        </button>
                    </li>
     
                    <li>
                        <button class="frb-btn paymentmethod-pp">
                            {{int:Centralnotice-FR2015_translations-pm-paypal}}
                        </button>
                    </li>
     
                    <li>
                        <button class="frb-btn paymentmethod-slip">
                            {{int:Centralnotice-B16_WMCH_translations-paymentslip-text}}
                        </button>
                    </li>
     
                </ul>
     
                <div class="frb-bankinfo">
                    <span>Wikimedia CH, 8008 Zürich</span> /
                    <span>IBAN: CH13 0900 0000 85 359089 1</span>
                </div>
     
            </fieldset>
     
        </form>
        </div><!--frb-bottom-->
        <div class="frb-footer">
            {{int:Centralnotice-B16_WMCH_translations-privacy-text}}
         </div>
         </div>


        <span class="frb-close bottom">
    </div>
            {{int:Centralnotice-close-title}}
</div>
            <span class="frb-close-x"></span>
        </span>


<script type="text/javascript">
  $( '#interval_onetime' ).off( 'click' ).on( 'click', function () {
      $( '#interval_multiple' ).prop( 'checked', false );
      $( '.donation-interval' ).removeClass( 'checked' );
  } );


     </div><!--frb-window-->
  $( '#WMDE_Banner-frequency' ).find( 'label' ).click( function () {
     $( '#WMDE_Banner-frequency' ).find( 'label' ).removeClass( 'checked' );
    $( this ).addClass( 'checked' );
  } );


</div><!--frb-->
  $( '.donation-interval' ).click( function () {
    $( '.donation-interval' ).removeClass( 'checked' );
    $( this ).addClass( 'checked' );
    $( '.donation-frequency' ).removeClass( 'checked' );
    $( '#interval_onetime' ).prop( 'checked', false );
    $( '#interval_multiple' ).prop( 'checked', 'checked' );
  });


<!--frb-nag-->
  $( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () {
<div id="frb-nag" class="frb" style="display:none;"><!-- the nag banner -->
    $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' );
     <div class="frb-nag-message">
     $( '#amount-other-input' ).parent().removeClass( 'checked' );
        <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.</div>
    $( this ).addClass( 'checked' );
    <div class="frb-nag-message2">Support Wikipedia</div>
  } );
    <button class="frb-btn frb-btn-btxt">{{int:Centralnotice-FR2015_translations-donate-now}}</button>
    <span class="frb-nag-close" tabindex="0"></span>
</div><!--frb-nag-->


<script>
  $( '#amount-other-input' ).click( function () {
/* Allow overriding country */
    $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' );
if( mw.util.getParamValue("country") ) {
     $( this ).parent().addClass( 'checked' );
     Geo.country = mw.util.getParamValue("country");
  } );
}


{{MediaWiki:FR2014/Resources/alterImpressionData.js}}
  function addSpace() {
    if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) {
      return;
    }
    var bannerHeight = $( 'div#WMDE_Banner' ).height(),
        skin = getSkin();


var frb = frb || {};
    switch ( skin ) {
      case 'vector':
        $( '#mw-panel' ).animate( {'top':bannerHeight + 160},1000 );
        $( '#mw-head' ).animate( {'top':bannerHeight},1000 );
        $( '#mw-page-base' ).animate( {'padding-top':bannerHeight},1000);
      case 'minerva':
        $( '#mw-mf-viewport' ).animate( {'top':bannerHeight},1000 );
        break;
    }
  }


frb.showLargeBanner = function() {
  function addSpaceInstantly() {
     $('#content_wrapper').prepend($('#frb'));
     if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) {
     $('#frb-window').css('top', $(window).scrollTop() + 20); // position banner where they have scrolled to
      return;
    $('#frb').show();
     }
};
    var bannerHeight = $( 'div#WMDE_Banner' ).height(),
        skin = getSkin();


frb.validateForm = function() {
    switch ( skin ) {
    var form = document.donationForm;
      case 'vector':
     var error = false;
        $( '#mw-panel' ).css( { top: bannerHeight + 160 } );
        $( '#mw-head' ).css( { top: bannerHeight } );
        $( '#mw-page-base' ).css( { paddingTop: bannerHeight } );
      case 'minerva':
        $( '#mw-mf-viewport' ).css( { top: bannerHeight } );
        break;
     }
  }


    // Get amount selection
  function displayBanner() {
    var amount = $('input[name=amount]:checked').val();
     if ( !showBanner ) {
    if( amount === 'Other' ) {
      return;
        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;
     }
     }
    var bannerElement = $( '#WMDE_Banner' ),
        bannerHeight = bannerElement.height();
    $( 'body' ).prepend( $( '#centralNotice' ) );
    bannerElement.css( 'top', -bannerHeight );
    bannerElement.css( 'display', 'block' );
    addSpace();
    bannerElement.animate( { top: 0 }, 1000 );
    setTimeout( function () {
      Banner.progressBar.animateProgressBar();
    }, 1000 );


    // make sure the right field form has the amount
     $( window ).resize( function () {
     $('input[name=amount]:checked').val( amount );
      addSpaceInstantly();
 
      calculateLightboxPosition();
     return !error;
      Banner.progressBar.setProgressBarSize.apply( Banner.progressBar );
};
     } );
  }


$(document).ready(function() {
  function calculateLightboxPosition() {
      $( '#wlightbox' ).css( { right: ( $('body').width() - 750 ) / 2 + 'px', top: '20px', top: ( $( '#WMDE_Banner' ).height() + 20 ) + 'px' } );
  }


     var donationForm = document.donationForm;
  function addMiniBanner() {
    /* add the "nag" bar. Has to be done after we show the main banner (to get its height) */
     var bigBannerHeight = $('#WMDE_Banner').height();


     $( '.paymentmethod-cc' ).click( function() {
     $( window ).scroll( function () {
        if( frb.validateForm() ) {
      if ( $( window ).scrollTop() <= bigBannerHeight ) {
            donationForm.action = '{{int:Centralnotice-B16_WMCH_translations-creditcard-link}}';
        $( '#WMDE_Banner-nag' ).finish();
            $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
        $( '#WMDE_Banner-nag' ).css( 'display', 'none' );
            donationForm.submit();
      } else {
        } else {
        // only show mini banner if no lightbox is visible
            alert( "{{int:Centralnotice-B16_WMCH_translations-amount-alert}}" );
        if ( !$( '#wlightbox' ).is(':visible') ) {
            return false;
          $( '#WMDE_Banner-nag' ).delay( 1500 ).slideDown();
         }
         }
      }
     });
     });


     $( '.paymentmethod-pp' ).click( function() {
     $( '#WMDE_Banner-nag-close' ).click( function ( event ) {
        if( frb.validateForm() ) {
      $( '#WMDE_Banner-nag' ).remove();
            donationForm.action = 'https://www.paypal.com/cgi-bin/webscr';
      event.stopPropagation();
            $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', false );
            donationForm.lc.value = mw.config.get('wgUserLanguage'); // set to correct language
            donationForm.submit();
        } else {
            alert( "{{int:Centralnotice-B16_WMCH_translations-amount-alert}}" );
            return false;
        }
     });
     });


     $( '.paymentmethod-slip' ).click( function() {
     $( '#WMDE_Banner-nag' ).click( function () {
        donationForm.action = '{{int:Centralnotice-B16_WMCH_translations-paymentslip-link}}';
      window.scrollTo( 0, 0 );
        $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' );
        donationForm.submit();
     });
     });
  }


    // Reset "other box" if they click a different amount
  $( document ).ready( function() {
    $('#amount1, #amount2, #amount3, #amount4, #amount5').click(function() {
    var lightboxOpened = false;
        $('#frb-amt-other-input').val('');
    $( '#WMDE_Banner-payment button' ).click( function( e ) {
     });
      return validateForm();
     } );


     $('.frb-close').click(function() {
     $( '#interval_onetime' ).off( 'click' ) // remove handler from common-banner.js
        // Don't set a hide cookie here, as we expect them to always close this
      .on( 'click', function () {
        $("#frb").hide();
        $( '#interval_multiple' ).prop( 'checked', false );
     });
        $(".donation-interval").removeClass("checked");
    } );
 
    var impCount = increaseImpCount();
    $( '#impCount' ).val( impCount );
     var bannerImpCount = increaseBannerImpCount( "{{{banner}}}" );
    $( '#bImpCount' ).val( bannerImpCount );


     /* Close large banner when clicked outside */
     if ( mw.config.get( 'wgAction' ) === "view" ) {
    $('#frb-mask').on('click.bannerHide', function(e) {
      setTimeout( displayBanner, 7500 );
        if ($(e.target).closest("#frb-window").length === 0) {
    }
            $("#frb").hide();
    if ( mw.config.get( 'wgUserName' ) !== null ) {
            $(document).unbind('click.bannerHide');
      $( '#wikilogin' ).val( 'yes' );
        }
     }
     });


     /* Hide banner outside of main namespace (and Main Page, for sites where that isn't in main namespace) */
     $( 'span#numDaysLeft' ).text( getDaysRemaining() );
     if ( mw.config.get('wgNamespaceNumber') > 0 && !mw.config.get('wgIsMainPage') ) {
     $( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) );
        mw.centralNotice.bannerData.hideResult = true;
    if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) {
        mw.centralNotice.bannerData.hideReason = 'namespace';
      $( '#weekdayPrepPhrase' ).text( 'am heutigen' );
     }
     }
    $( 'span#campaignDay' ).text( getCampaignDayString() );
    $( 'span#donorsValue' ).html( addPointsToNum( Math.floor( getApprDonatorsRaw() ) ) );
    $( '.bannerImpressions').text( window.GlobalBannerSettings[ 'milion-impressions-per-day' ] );
    $( '#campaignDaySentence' ).text( getCampaignDaySentence() );


     if (!mw.centralNotice.bannerData.hideResult) {
     if ( getDaysSinceCampaignStart() < 1 ) {
         frb.showLargeBanner();
        $( '#donationRemaining' ).text( 'Unser Spendenziel: ' + ( GlobalBannerSettings.goalSum / 1000000 ).toFixed( 1 ).replace( '.', ',' ) + ' Mio. €' );
         $( '#donationText' ).html( '' );
     }
     }


});
    $( '#application-of-funds-link' ).wlightbox( { container: $( '#mw-page-base' ), right: ( $('body').width() - 750 ) / 2 + 'px', top: function() { return ( $( '#WMDE_Banner' ).height() + 20 ) + 'px'; } } );
    $( '#application-of-funds-link' ).click( function ( e ) {
        $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/application-of-funds-lightbox-opened/{{{BannerName}}}&rec=1' );
    } );
 
    $( '#link-wmf-annual-plan' ).click( function ( e ) {
        $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmf-annual-plan/{{{BannerName}}}&rec=1' );
    } );
 
    $( '#link-wmde-annual-plan' ).click( function ( e ) {
        $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmde-annual-plan/{{{BannerName}}}&rec=1' );
    } );
 
  } );
</script>
</script>

Version vom 10. September 2018, 15:28 Uhr

<style type="text/css">MediaWiki:WMDE FR2015/Resources/DesktopBanner.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/icon.css</style> <style type="text/css">MediaWiki:WMDE FR2015/Resources/wlightbox.css</style> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/BannerValues.js</script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/DesktopBanner.js </script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/CountCampaignDays.js </script> <script type="text/javascript">MediaWiki:WMDE FR2015/Resources/CustomDayName.js</script> <script type="text/javascript">MediaWiki:WMDE FR2016/Resources/wlightbox.js</script> <style type="text/css">

 #WMDE_Banner-facts {
   background-color:#2b8156;
 }
 #WMDE_Banner_info {
   color: #ffffff;
 }
 #WMDE_Banner-text {
   text-align:left;
   color: #ffffff;
 }
 #WMDE_Banner-text-salute {
   color: #ffffff;
   font-size: 17px;
   font-weight: bold;
   line-height: 1.2em;
   margin: 4px 10px 4px 35px;
   text-align: justify;
   margin-bottom: 0;
   padding-bottom: 0;
 }
  1. WMDE_BannerForm-wrapper {
   background-color: #ffffff;
   padding: 0 10px;
 }
  1. WMDE_Banner-form fieldset {
   width: 95%;
   border: 0;
   margin: 0 auto;
   padding: 0 0.5em 0.5em 0.5em;

}

  1. WMDE_Banner-frequency ul,
  2. WMDE_Banner-amounts ul,
  3. WMDE_Banner-payment ul {
   width: 100%;
   height: 100%;
   display: table;
   margin: 0 0 0.3em;
   padding: 0;
   list-style: none;

}

  1. WMDE_Banner-form legend {
   display: none;
   width: 100%;
   margin: 0;
   padding: 0 0 0.3em 0;
   text-align: center;
   font-size: .9em;
   color: rgba(0,0,0,0.42);

}

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

.WMDE_Banner-btn {

   background: #f8f9fa;
   border: 1px solid #9aa0a7;
   border-radius: 2px;
   padding: 11px 0;
   width: 100%;
   cursor: pointer;
   display: inline-block;
   margin: 0 1px;
   text-align: center;
   font-weight: bold;

}

.WMDE_Banner-btn:hover {

   background-color: #ffffff;
   color: #444444;
   border-color: #a2a9b1;

}

.WMDE_Banner-btn.checked {

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

}

  1. WMDE_Banner-payment .btn-payment-type {
   background: #f8f9fa;
   font-size: 0.9em;
   color: #3366cc;

}

/* --- Frequency Buttons --- */

  1. WMDE_Banner-frequency li {
   display: table-cell;
   width: 33%;
   padding: 0 2% 0 0;
   vertical-align: top;

} body.rtl #WMDE_Banner-frequency li { padding: 0 0 0 2%; }

  1. WMDE_Banner-frequency label {
   width: 100%;
   display: block;
   font-size: .9em;

}

/*@media (min-width : 1100px) { #WMDE_Banner-frequency label { font-size: .95em; } }*/ @media (min-width : 1200px) {

   /*#WMDE_Banner-frequency label {
       font-size: 1em;
   }*/
   /*#WMDE_Banner-payment .WMDE_Banner-btn {
       min-height: 2em !important;
   }
   .WMDE_Banner-btn {
       padding: 4px 0;
   }*/

}

  1. WMDE_Banner-frequency input[type="radio"] {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;

}

/* --- Amount Buttons --- */

  1. WMDE_Banner-amounts legend {
   display: block;

}

  1. WMDE_Banner-amounts li {
   display: table-cell;
   width: 23%;
   height: 100%;
   clear: none;
   padding: 0 2% 0 0;
   vertical-align: top;
   font-weight: bold;

} body.rtl #WMDE_Banner-amounts li {

   padding: 0 0 0 2%;

}

/* Chrome specific - need to be floated for height 100% to work */ @media screen and (-webkit-min-device-pixel-ratio:0) {

   #WMDE_Banner-amounts li { float: left; }
   body.rtl #WMDE_Banner-amounts li { float: right; }

}

  1. WMDE_Banner-amounts li input[type="radio"] {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;

}

  1. WMDE_Banner-amounts label {
   font-size: .9em;
   text-transform: none;

}

/*@media (min-width : 800px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1em; } } @media (min-width : 1100px) { #WMDE_Banner-amounts .predefined_amount { font-size: 1.1em; } }*/

/* --- Other Amount --- */

  1. amount_custom .WMDE_Banner-btn {
   display: inline-block;
   height: 100%;
   width: 100%;
   padding: 0.2em 0 0.4em 0;

}

  1. amount_custom label {
   display: block;
   height: auto;
   margin-bottom: 0.2em;
   font-size: .7em;
   line-height: 1;
   cursor: pointer;

}

  1. amount_custom input {
   width: 85%;
   font-size: .9em;
   padding: 11px .4em;
   text-align: center;
   border: 1px solid #9aa0a7;
   margin: 0 1px;

}

  1. amount_custom .checked input {
   background: #2a4b8d;
   color: #ffffff;

}

  1. amount_custom input:hover {
   box-shadow: 0 0 0 1px #3366cc inset;
   background-color: #ffffff;
   color: #444444;
   border-color: #a2a9b1;

}

/* --- Payment method Buttons --- */

  1. WMDE_Banner-payment {
   padding-bottom: 0.25em;

}

  1. WMDE_Banner-payment ul li {
   display: table-cell;
   padding: 0 2% 0 0;
   vertical-align: top;
   width: 50%;
   margin-bottom: 4px;

} body.rtl #WMDE_Banner-payment ul li {

   padding: 0 0 0 2%;

}

  1. WMDE_Banner-window button {
   width: 100%;
   height: 100%;
   font-size: .9em;
   float: none;
   font-family: inherit;

}

@media all and (min-width: 1px) and (max-width: 900px), all and (min-width: 1050px) and (max-width: 1200px) {

 #WMDE_Banner-payment .btn-payment-type {
   min-height: 4em;
 }

}

@media all and (min-width: 1px) and (max-width: 1050px) {

 #WMDE_Banner-payment ul {
   margin: 0;
   width: 100%;
 }
 #WMDE_Banner-payment ul li {
   display: block;
   width: 100%;
 }

}

  1. WMDE_Banner div.active {
   text-decoration: underline;
   border-bottom: none;
   background: transparent;

}

  1. WMDE_Banner .highlight {
   background-color: #ffdd5b;
   color: #000000;

}

/* --- Donation meter --- */

  1. WMDE_Banner #donationMeterWrapper {
    margin: 0 10px 10px 35px;

}

  1. WMDE_Banner-close {
   background-image: url('//upload.wikimedia.org/wikipedia/commons/c/cb/Close_x_-_black.png');
   background-color: transparent;
   background-size: 12px auto;

}

  1. application-of-funds-link {
   cursor: pointer;
   margin-left: 1.5em;

}

  1. application-of-funds-link:hover {
   text-decoration: underline;

}

  1. info-application-of-funds {
   width: 720px;
   margin-top: -5px;

}

  1. info-application-of-funds hr {
   margin: 1.4em 0;

}

  1. info-application-of-funds-footer {
   font-size: 0.8em;

}

  1. info-application-of-funds-footer div {
   width: 49%;
   display: inline-block;
   text-align: center;

}

  1. info-application-of-funds-footer a {
   color: #3366cc;

}

</style>

   <form id="WMDE_Banner-form" method="post" name="donationForm"
         action="https://spenden.wikimedia.de/donation/new?piwik_campaign={{{CampaignName}}}&piwik_kwd={{{BannerName}}}">
<tbody> </tbody>
<tbody> </tbody>

{{{banner-text-salutation}}}

{{{banner-text}}}

MediaWiki:WMDE FR2016/Resources/ProgressBar

                           Wohin geht meine Spende?
                     Spendenkonto
                     Wikimedia Foerdergesellschaft
                     BIC
                     BFSWDE33BER
                     IBAN DE33 1002 0500 0001 1947 00
           <fieldset id="WMDE_Banner-frequency" class="cf">
  • <input type="radio" id="interval_multiple" /> <label class="WMDE_Banner-btn donation-frequency" for="interval_onetime"> <input type="radio" id="interval_onetime"> einmalig </label>
  • <label class="WMDE_Banner-btn donation-interval" for="interval1"> <input type="radio" id="interval1" name="interval" value="1"> monatlich </label>
  • <label class="WMDE_Banner-btn donation-interval" for="interval12"> <input type="radio" id="interval12" name="interval" value="12"> jährlich </label>
           </fieldset>
           <fieldset id="WMDE_Banner-amounts" class="cf">
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_1" value="5"> <label id="amount_label_1" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_1">5 €</label>
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_2" value="15"> <label id="amount_label_2" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_2">15 €</label>
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_3" value="25"> <label id="amount_label_3" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_3">25 €</label>
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_4" value="50"> <label id="amount_label_4" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_4">50 €</label>
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_5" value="75"> <label id="amount_label_5" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_5">75 €</label>
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_6" value="100"> <label id="amount_label_6" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_6">100 €</label>
  • <input type="radio" name="betrag_auswahl" id="field-amount_total_7" value="250"> <label id="amount_label_7" class="WMDE_Banner-btn predefined_amount" for="field-amount_total_7">250 €</label>
  • <input type="text" name="amountGiven" id="amount-other-input" size="3" autocomplete="off" value="" placeholder="anderer">
           </fieldset>
           <fieldset id="WMDE_Banner-payment" class="cf">
  • <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('BEZ');"> Lastschrift </button>
  • <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('UEB');"> Überweisung </button>
  • <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('MCP');"> Kreditkarte </button>
  • <button class="WMDE_Banner-btn btn-payment-type" onclick="$('#zahlweise').val('PPL');"> PayPal </button>
           </fieldset>
            
     <input type="hidden" id="periode" name="periode" value="0"/>
     <input type="hidden" id="intervalType" name="intervalType" value="0"/>
     <input type="hidden" id="impCount" name="impCount" value=""/>
     <input type="hidden" id="bImpCount" name="bImpCount" value=""/>
     <input type="hidden" id="zahlweise" name="zahlweise" value=""/>
   </form>
 <img id="WMDE_Banner-close-ct" src="//upload.wikimedia.org/wikipedia/commons/c/ce/Transparent.gif" border="0" height="0" width="0">
  • Jederzeit und ab sofort kündbar. Eine formlose E-Mail genügt.
  • Betrag und Zahlungsintervall problemlos änderbar.
  • Vergrößerte Planungssicherheit und Nachhaltigkeit.
  • Automatischer Versand der Zuwendungsbestätigung.
  • Auf Wunsch Versand unseres Tätigkeitsberichts.
           Wohin geht meine Spende?
           <a href="http://wikimedia.de/wiki/Transparenz" target="_blank"></a>

<img src="//upload.wikimedia.org/wikipedia/commons/8/8a/WMDE-application-of-funds-diagram-2017.png" />

           <img src="//upload.wikimedia.org/wikipedia/commons/0/00/WMDE-application-of-funds-2017.svg" />

<script type="text/javascript">

 $( '#interval_onetime' ).off( 'click' ).on( 'click', function () {
      $( '#interval_multiple' ).prop( 'checked', false );
      $( '.donation-interval' ).removeClass( 'checked' );
 } );
 $( '#WMDE_Banner-frequency' ).find( 'label' ).click( function () {
   $( '#WMDE_Banner-frequency' ).find( 'label' ).removeClass( 'checked' );
   $( this ).addClass( 'checked' );
 } );
 $( '.donation-interval' ).click( function () {
   $( '.donation-interval' ).removeClass( 'checked' );
   $( this ).addClass( 'checked' );
   $( '.donation-frequency' ).removeClass( 'checked' );
   $( '#interval_onetime' ).prop( 'checked', false );
   $( '#interval_multiple' ).prop( 'checked', 'checked' );
 });
 $( '#WMDE_Banner-amounts' ).find( 'label' ).click( function () {
   $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' );
   $( '#amount-other-input' ).parent().removeClass( 'checked' );
   $( this ).addClass( 'checked' );
 } );
 $( '#amount-other-input' ).click( function () {
   $( '#WMDE_Banner-amounts' ).find( 'label' ).removeClass( 'checked' );
   $( this ).parent().addClass( 'checked' );
 } );
 function addSpace() {
   if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) {
     return;
   }
   var bannerHeight = $( 'div#WMDE_Banner' ).height(),
       skin = getSkin();
   switch ( skin ) {
     case 'vector':
       $( '#mw-panel' ).animate( {'top':bannerHeight + 160},1000 );
       $( '#mw-head' ).animate( {'top':bannerHeight},1000 );
       $( '#mw-page-base' ).animate( {'padding-top':bannerHeight},1000);
     case 'minerva':
       $( '#mw-mf-viewport' ).animate( {'top':bannerHeight},1000 );
       break;
   }
 }
 function addSpaceInstantly() {
   if ( !$( '#WMDE_Banner' ).is( ':visible' ) ) {
     return;
   }
   var bannerHeight = $( 'div#WMDE_Banner' ).height(),
       skin = getSkin();
   switch ( skin ) {
     case 'vector':
       $( '#mw-panel' ).css( { top: bannerHeight + 160 } );
       $( '#mw-head' ).css( { top: bannerHeight } );
       $( '#mw-page-base' ).css( { paddingTop: bannerHeight } );
     case 'minerva':
       $( '#mw-mf-viewport' ).css( { top: bannerHeight } );
       break;
   }
 }
 function displayBanner() {
   if ( !showBanner ) {
     return;
   }

   var bannerElement = $( '#WMDE_Banner' ),
       bannerHeight = bannerElement.height();
   $( 'body' ).prepend( $( '#centralNotice' ) );
   bannerElement.css( 'top', -bannerHeight );
   bannerElement.css( 'display', 'block' );
   addSpace();
   bannerElement.animate( { top: 0 }, 1000 );
   setTimeout( function () {
     Banner.progressBar.animateProgressBar();
   }, 1000 );
   $( window ).resize( function () {
     addSpaceInstantly();
     calculateLightboxPosition();
     Banner.progressBar.setProgressBarSize.apply( Banner.progressBar );
   } );
 }
 function calculateLightboxPosition() {
     $( '#wlightbox' ).css( { right: ( $('body').width() - 750 ) / 2 + 'px', top: '20px', top: ( $( '#WMDE_Banner' ).height() + 20 ) + 'px' } );
 }
 function addMiniBanner() {
   /* add the "nag" bar. Has to be done after we show the main banner (to get its height) */
   var bigBannerHeight = $('#WMDE_Banner').height();
   $( window ).scroll( function () {
     if ( $( window ).scrollTop() <= bigBannerHeight ) {
       $( '#WMDE_Banner-nag' ).finish();
       $( '#WMDE_Banner-nag' ).css( 'display', 'none' );
     } else {
       // only show mini banner if no lightbox is visible
       if ( !$( '#wlightbox' ).is(':visible') ) {
         $( '#WMDE_Banner-nag' ).delay( 1500 ).slideDown();
       }
     }
   });
   $( '#WMDE_Banner-nag-close' ).click( function ( event ) {
     $( '#WMDE_Banner-nag' ).remove();
     event.stopPropagation();
   });
   $( '#WMDE_Banner-nag' ).click( function () {
     window.scrollTo( 0, 0 );
   });
 }
 $( document ).ready( function() {
   var lightboxOpened = false;
   $( '#WMDE_Banner-payment button' ).click( function( e ) {
     return validateForm();
   } );
   $( '#interval_onetime' ).off( 'click' ) // remove handler from common-banner.js
     .on( 'click', function () {
        $( '#interval_multiple' ).prop( 'checked', false );
        $(".donation-interval").removeClass("checked");
   } );
 
   var impCount = increaseImpCount();
   $( '#impCount' ).val( impCount );
   var bannerImpCount = increaseBannerImpCount( "{{{banner}}}" );
   $( '#bImpCount' ).val( bannerImpCount );
   if ( mw.config.get( 'wgAction' ) === "view" ) {
     setTimeout( displayBanner, 7500 );
   }
   if ( mw.config.get( 'wgUserName' ) !== null ) {
     $( '#wikilogin' ).val( 'yes' );
   }
   $( 'span#numDaysLeft' ).text( getDaysRemaining() );
   $( 'span#weekday' ).text( getCurrentDayName( getCurrentGermanDay ) );
   if ( getCurrentDayName( getCurrentGermanDay ) !== getCurrentGermanDay() ) {
     $( '#weekdayPrepPhrase' ).text( 'am heutigen' );
   }
   $( 'span#campaignDay' ).text( getCampaignDayString() );
   $( 'span#donorsValue' ).html( addPointsToNum( Math.floor( getApprDonatorsRaw() ) ) );
   $( '.bannerImpressions').text( window.GlobalBannerSettings[ 'milion-impressions-per-day' ] );
   $( '#campaignDaySentence' ).text( getCampaignDaySentence() );
   if ( getDaysSinceCampaignStart() < 1 ) {
       $( '#donationRemaining' ).text( 'Unser Spendenziel: ' + ( GlobalBannerSettings.goalSum / 1000000 ).toFixed( 1 ).replace( '.', ',' ) + ' Mio. €' );
       $( '#donationText' ).html(  );
   }
   $( '#application-of-funds-link' ).wlightbox( { container: $( '#mw-page-base' ), right: ( $('body').width() - 750 ) / 2 + 'px', top: function() { return ( $( '#WMDE_Banner' ).height() + 20 ) + 'px'; } } );
   $( '#application-of-funds-link' ).click( function ( e ) {
       $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/application-of-funds-lightbox-opened/{{{BannerName}}}&rec=1' );
   } );
   $( '#link-wmf-annual-plan' ).click( function ( e ) {
       $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmf-annual-plan/{{{BannerName}}}&rec=1' );
   } );
   $( '#link-wmde-annual-plan' ).click( function ( e ) {
       $( '#WMDE_Banner-close-ct' ).attr( 'src', 'https://tracking.wikimedia.de/piwik/piwik.php?idsite=1&url=https://spenden.wikimedia.de/wmde-annual-plan/{{{BannerName}}}&rec=1' );
   } );
 } );

</script>