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

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




----------{{MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js
----------<style type="text/css">
| hide-cookie-name      = centralnotice_bannercount_fr12
#cn-toggle-box {
| hide-cookie-show-count = 5
   float: right;
| hide-cookie-wait-count = 0
| hide-cookie-wait-delay = 2592000
}}
 
<style>
/* Clearfix */
 
#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%;
    }
}
}
 
.wlm_2012_org_image {
li.subhead {
  border: 0  
    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;
    }
 
#frbanner-window li.frbanner-submit {
    display: block;
    margin:0;
    }
 
/*-- Payment method buttons --*/
 
#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%; }}
 
#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;
}
}
 
</style>
/* -- Bottom banner -- */
<script type="text/javascript">
 
var cn_rewrite_url = function() {
#frbanner2 {
   url = '';
   width: 100%;
   switch(Geo.country) {
   position: fixed;
  case 'CH':
  left: 0;
    url = 'http://wiki4alps.ch/?pk_campaign=Centralnotice';
  bottom: 0;
    break;
   cursor: pointer;
   }
  text-align: center;
if(url!='') $("div#wlm-banner a.wlm-mainlink").attr("href",url);
  z-index: 100;
}
}
#frbanner2 * {
$(document).ready(cn_rewrite_url);
  -webkit-transition: all .3s ease-in-out;
</script>
  -moz-transition:    all .3s ease-in-out;
<div id="wlm-banner" class="plainlinks" style="background:#FCFCFC; border:1px solid #9E0101; margin: 0 auto 1em auto; font-size: 120%; overflow: hidden; text-align: center; padding: 0.5ex;" >
  -o-transition:      all .3s ease-in-out;
<div id="cn-toggle-box">
  -ms-transition:    all .3s ease-in-out;
    <a href="#" title="Close" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Close" /></a>
  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; }
 
#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>
 
<div id="frbanner" style="display: none;"><!-- the "full screen" banner -->
 
    <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>
 
<div style="margin-top: 17px">
 
<a class="wlm-mainlink" href="http://wiki4alps.ch/?pk_campaign=Centralnotice">
{{MediaWiki:FR2013/Resources/Country2Currency.js}}
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/ca/Wiki_Loves_Monuments_Logo_notext.svg/60px-Wiki_Loves_Monuments_Logo_notext.svg.png" class="wlm_2012_org_image" style="float:left; margin-left: 15px; margin-top: -17px" />
{{MediaWiki:FR2013/Resources/MobileBanner.js}}
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/d/dc/Valère_et_Tourbillon_à_Sion_en_Valais_Suisse.JPG/77px-Valère_et_Tourbillon_à_Sion_en_Valais_Suisse.JPG" class="wlm_2012_org_image" style="float:right; margin-right: 10px; margin-top: -15px" /><a class="wlm-mainlink" href="http://wiki4alps.ch/?pk_campaign=Centralnotice">{{{text}}}</a></a></div></div>
 
<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/"><img src="//hurraki.de/w/images/7/74/Leichte_Sprache_App_Apple_banner.jpg" title="Leichte Sprache App für iPhone und iPad" style="border: none; float: middle; width: 800px; height: 221px; margin-right: .8em; vertical-align: middle;" /></a> <a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Schließen" /></a>


<style type="text/css">

  1. cn-toggle-box {
 float: right;

} .wlm_2012_org_image { 

 border: 0

} </style> <script type="text/javascript"> var cn_rewrite_url = function() { 

 url = ;
 switch(Geo.country) {
  case 'CH':
    url = 'http://wiki4alps.ch/?pk_campaign=Centralnotice';
    break;
 }
if(url!=) $("div#wlm-banner a.wlm-mainlink").attr("href",url);

} $(document).ready(cn_rewrite_url); </script>

Abgerufen von „https://hurraki.de/w/index.php?title=MediaWiki:Centralnotice-template-Leichte_Sprache_Banner_iPad&oldid=31239“