MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad: Unterschied zwischen den Versionen
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
Admin (Diskussion | Beiträge) Keine Bearbeitungszusammenfassung |
||
Zeile 5: | Zeile 5: | ||
---------- | ----------{{MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js | ||
| hide-cookie-name = centralnotice_bannercount_fr12 | |||
| hide-cookie-show-count = 5 | |||
| hide-cookie-wait-count = 0 | |||
| hide-cookie-wait-delay = 2592000 | |||
}} | |||
# | <style> | ||
display: | /* Clearfix */ | ||
font-size: . | |||
#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: | color: #7c7c7c; | ||
height: | } | ||
@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; | 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; | |||
} | } | ||
/* -- Bottom banner -- */ | |||
#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; } | |||
# | #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> | </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 & ad-free another year. | |||
</p> | |||
</div> | </div> | ||
{{MediaWiki:FR2013/Resources/Country2Currency.js}} | |||
{{MediaWiki:FR2013/Resources/MobileBanner.js}} | |||
<script> | |||
$(document).ready(function() { | |||
$("#frbanner-close").click(function() { | |||
$("#frbanner").hide(); | |||
}); | |||
$("#frbanner2").click(function() { | |||
window.scrollTo(0,0); | |||
$("#frbanner").show(); | |||
$("#frbanner2").slideToggle(); | |||
}); | |||
$("#frbanner2-close").click(function() { | |||
mw.centralNotice.hideBanner(); | |||
}); | |||
if (!mw.centralNotice.bannerData.hideResult) { | |||
// Show the correct sub-banner | |||
if (mw.centralNotice.bannerData.cookieCount === 1) { | |||
$('#frbanner').show(); | |||
} else if (mw.centralNotice.bannerData.cookieCount > 1) { | |||
$('#frbanner2').show(); | |||
} | |||
} | |||
}); | |||
</script> |
Version vom 10. September 2018, 15:02 Uhr
<a href="https://itunes.apple.com/de/artist/christian-wolf/id903688769/"><img src="//hurraki.de/w/images/7/74/Leichte_Sprache_App_Apple_banner.jpg" title="Leichte Sprache App für iPhone und iPad" style="border: none; float: middle; width: 800px; height: 221px; margin-right: .8em; vertical-align: middle;" /></a>
<a href="#" title="Schließen" onclick="mw.centralNotice.hideBanner();return false;"><img border="0" src="//upload.wikimedia.org/wikipedia/foundation/2/20/CloseWindow19x19.png" alt="Schließen" /></a>
MediaWiki:CentralNotice/Resources/BannerShowHideCountDate.js
<style> /* Clearfix */
- 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; 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;
}
/* -- Bottom banner -- */
- 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; }
- 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>