MediaWiki:Centralnotice-template-Leichte Sprache Banner iPad
<style> /* Clearfix */ .frb .cf:before, .frb .cf:after {
content: ""; display: table;
}
.frb .cf:after { clear: both; }
/* Box-sizing */ .frb, .frb *, .frb *:before, .frb *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Common styles */ .frb label, .frb button, .frb input {
font-family: inherit; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
/* Main banner
*/
- frb {
position: absolute; top: 0 !important; left: 0; width: 100%; height: 100%; font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif;
}
- frb-mask {
position: absolute; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: black; opacity: 0.8;
}
- frb-window {
position: relative; top: 0; left: 0; right: auto; width: 100%; margin-top: 0; color: #000; background: #fff;
}
@media (min-width: 768px) {
#frb-window { margin-top: 20px; left: 5%; right: 5%; width: 90%; }
}
/* --- Message --- */
.frb-message {
font-size: 20px; line-height: 1.3; border: 5px solid #990000; border-bottom: 0;
}
.frb-message-text {
padding: 20px; font-weight: bold;
}
@media (min-width: 768px) {
.frb-message { font-size: 24px; line-height: 1.4; } .frb-message-text { padding: 48px 72px; }
}
@media (min-height: 1000px) {
.frb-message { font-size: 24px; } .frb-message-text { padding: 48px 72px; }
}
.frb-message-text p {
margin-bottom: 10px;
}
.frb-message-text p:last-child {
margin-bottom: 0;
}
/* Call to action */
.frb-cta {
text-align: center; background: #990000; color: #fff; padding: 10px; font-weight: 400; font-size: 24px; display: block; margin: auto; width: 100%; position: relative;
}
@media (min-height: 1000px) {
.frb-cta { padding: 27px; }
} @media (min-width : 1100px) {
.frb-cta { font-size: 33px; }
}
.frb-cta:after {
position: absolute; left: 50%; top: 100%; height: 0; width: 0; margin-left: -10px; content: " "; border: solid transparent; border-top-color: #990000; border-width: 10px; pointer-events: none;
}
/* --- Form --- */
- frb-donation-form {
position: relative; background: #fff; padding: 1.5em 1.5em 0em; clear: both;
}
@media (min-width: 768px) {
#frb-donation-form { padding: 2em 2em 1em 2em; }
}
- 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; float: left; margin-bottom: 6px; margin-right: 2%;
}
body.rtl .frb-amounts ul li {
float: right; margin-right: 0; margin-left: 2%;
}
@media (min-width : 570px) { .frb-amounts ul li { margin-bottom: 10px; } }
/* Very small screen layout, 2 amount buttons per row */ @media (max-width: 374px) {
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 */ @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; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px;
}
.frb-amounts li label {
display: block; width: 100%; 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: 768px) {
.frb-amounts li label { font-size: 28px; }
}
- frb-form input[type="radio"]:checked + .frb-btn, #frb-form .frb-btn.checked {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
.frb-amounts li input[type="radio"]:checked + label, .frb-amounts li input[type="radio"].checked + label {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
/* --- Other amount --- */
- frb-amt-other-input {
margin: 0; padding: 0; background: transparent; border: none; width: 90%; color: #222222; text-align: center; direction: ltr; border-radius: 0; 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 {
border: 1px solid #9aa0a7; color: #555; padding-left: 3px;
}
- frb-amt-other:checked + #frb-amt-other-label #frb-amt-other-input {
color: #FFFFFF;
}
/* --- Payment method buttons layout --- */
/* "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 */ @media (min-width: 768px) {
.frb-submit ul { display: table; table-layout: fixed; width: 100%; } .frb-submit ul li { display: table-cell; padding: 0 10px; vertical-align: top; }
}
@media (min-width : 570px) {
.frb-submit li { margin-bottom: 10px; }
}
/* --- Payment method buttons appearance --- */
.frb-submit .frb-btn {
display: inline-block; width: 100%; padding: 0.8em 0.4em; 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;
}
.frb-bankinfo span {
white-space: nowrap;
}
.frb-footer {
width: 100%; font-size: 75%; padding: 1em 20px; background: #e2e2e2; text-align: center; color: #3c3c3c;
}
/* --- Top bar --- */
.frb-topbar {
background: #000; display: block; z-index: 999; color: #fff; font-size: 14px; text-transform: uppercase; text-align: right; width: 100%;
}
@media (min-width: 375px) {
.frb-topbar { font-size: 16px; }
}
.frb-close, .frb-rml1-link {
display: inline-block; padding: 8px; cursor: pointer; z-index: 999; vertical-align: middle; color: #ccc;
}
.frb-close:hover, .frb-rml1-link:hover {
color: #fff;
}
/*Hover*/ .frb-close:hover .frb-close-x g {
stroke: #fff;
}
.frb-rml1-link {
width: 60%; border-right: 1px solid #666;
} body.rtl .frb-rml1-link {
border-right: 0; border-left: 1px solid #666;
}
.frb-close {
width: 38%;
}
.frb-close-x {
height: 14px; width: 14px; margin-bottom: -2px;
}
@media screen and (min-width: 375px) {
.frb-close-x { margin-bottom: -1px; }
}
.frb-close.bottom {
text-align: center; 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 {
color: #fff;
}
@media (min-width: 768px) {
.frb-close.bottom { display: none; }
}
/* 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; 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 {
text-decoration: none;
}
@media (min-width: 720px) {
#frb-nag { font-size: 17px; }
}
- frb-nag.reveal {
bottom: 0;
}
- frb-nag img {
height: 17px; width: 17px;
}
- frb-nag .frb-btn {
display: inline-block; font-size: 12px; padding: 3px 6px;
}
.frb-nag-message {
vertical-align: middle; margin-bottom: 8px; line-height: 1.1;
} .frb-nag-message:hover {
text-decoration: underline;
}
.frb-nag-close {
display: block; border: 2px solid black; position: absolute; 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 {
display: none;
}
/*!--- Focus styles ----*/
/*Outline reset*/ .frb-close:focus, .frb-rml1-link:focus, .frb-rml1-form input:focus, .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, .frb-frq-switch.is-active, .frb-btn:focus, .frb-rml2-form input:focus, .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*/ .frb-rml1-form input:focus {
box-shadow: inset 0 0 0 1px #FFFFFF, inset 0 0 0 1px #36c;
}
/*Focus styles*/ .frb-close:focus, .frb-rml1-link:focus {
box-shadow: inset 0 0 0 2px #000, inset 0 0 0 4px #36c;
}
.frb-btn-submit:focus, .frb-amounts input[type="radio"]:checked + label:focus, .frb-amounts input[type="radio"]:checked + .frb-btn:focus, .frb-amounts input[type="radio"]:checked:focus + label, .frb-amounts input[type="radio"]:checked:focus + .frb-btn, .frb-amt-other.is-focused .frb-btn {
border-color: #36c; box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}
.frb-close:focus, .frb-rml1-link:focus {
color: #fff;
}
.frb-close:focus .frb-close-x g {
stroke: #fff;
}
</style>
<script> /* Allow overriding country */ if( mw.util.getParamValue("country") ) {
Geo.country = mw.util.getParamValue("country");
}
MediaWiki:FR2014/Resources/alterImpressionData.js
var frb = frb || {};
frb.showLargeBanner = function() {
$('#content_wrapper').prepend($('#frb')); $('#frb-window').css('top', $(window).scrollTop() + 20); // position banner where they have scrolled to $('#frb').show();
};
frb.validateForm = function() {
var form = document.donationForm; var error = false;
// Get amount selection var amount = $('input[name=amount]:checked').val(); if( amount === 'Other' ) { 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; }
// make sure the right field form has the amount $('input[name=amount]:checked').val( amount );
return !error;
};
$(document).ready(function() {
var donationForm = document.donationForm;
$( '.paymentmethod-cc' ).click( function() { if( frb.validateForm() ) { donationForm.action = '⧼Centralnotice-B16_WMCH_translations-creditcard-link⧽'; $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' ); donationForm.submit(); } else { alert( "⧼Centralnotice-B16_WMCH_translations-amount-alert⧽" ); return false; } });
$( '.paymentmethod-pp' ).click( function() { if( frb.validateForm() ) { donationForm.action = 'https://www.paypal.com/cgi-bin/webscr'; $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', false ); donationForm.lc.value = mw.config.get('wgUserLanguage'); // set to correct language donationForm.submit(); } else { alert( "⧼Centralnotice-B16_WMCH_translations-amount-alert⧽" ); return false; } });
$( '.paymentmethod-slip' ).click( function() { donationForm.action = '⧼Centralnotice-B16_WMCH_translations-paymentslip-link⧽'; $( '#frb-donation-form > input.paypal-field' ).attr( 'disabled', 'disabled' ); donationForm.submit(); });
// Reset "other box" if they click a different amount $('#amount1, #amount2, #amount3, #amount4, #amount5').click(function() { $('#frb-amt-other-input').val(); });
$('.frb-close').click(function() { // Don't set a hide cookie here, as we expect them to always close this $("#frb").hide(); });
/* Close large banner when clicked outside */ $('#frb-mask').on('click.bannerHide', function(e) { if ($(e.target).closest("#frb-window").length === 0) { $("#frb").hide(); $(document).unbind('click.bannerHide'); } });
/* Hide banner outside of main namespace (and Main Page, for sites where that isn't in main namespace) */ if ( mw.config.get('wgNamespaceNumber') > 0 && !mw.config.get('wgIsMainPage') ) { mw.centralNotice.bannerData.hideResult = true; mw.centralNotice.bannerData.hideReason = 'namespace'; }
if (!mw.centralNotice.bannerData.hideResult) { frb.showLargeBanner(); }
}); </script>