MediaWiki:Centralnotice-template-WMCH1920 Sandbox dsk sm
<style> /* Box-sizing */ .frb, .frb *, .frb *:before, .frb *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* In-article banner styles
*/
- toc,
.toc {
clear: left;
}
- frb-inline {
float: left; width: 40%; display: table; position: relative; text-align: left; background: white; color: black; font-weight: 500; font-size: 14px; line-height: 1.4; /*16.8px @14px*/ margin-top: 5px; margin-bottom: 28px; margin-right: 16px; border-left: 8px solid #990000; border-bottom: 8px solid #990000; border-right: 8px solid #990000; border-top: 5px solid #990000; font-family:system-ui, -apple-system,BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, Lato, "Helvetica Neue", Helvetica, Arial, sans-serif; -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;
}
@media (max-width : 1000px) { #frb-inline { width: 100%; } }
html[lang="en"] #frb-inline {
font-size: 14px;
}
/* Override for where it should be full width e.g. on Main Page */
- frb-inline.frb-fullwidth {
float: none; width: 100%; margin-top: 0; margin-right: 0;
} /* --- Close and RML Options --- */ .frb-inline-topbar {
width: 100%; padding: 2px 10px 5px; text-align: center; background-color: #990000; color: #FFFFFF; display: inline-block; z-index: 999;
}
.frb-inline-header {
display: inline-block; font-weight: bold; font-size: 16px; line-height: 1.125; /*18px @16px*/ padding: 4px 0;
}
.frb-inline-window {
position: relative; float: right; text-align: right;
}
.frb-inline-main {
padding: 13px;
}
.frb-inline-message {
font-size: 16px; padding: 0 0 8px;
}
.frb-inline-message-image {
height: 16px; margin-top: -3px;
}
- frb-inline fieldset {
width: 100%; margin: 0 auto; padding: 0; border: none;
}
/* --- Form legends --- */
- frb-inline legend {
width: 100%; margin: 0 0 6px; text-align: center; font-size: 14px; font-weight: 500; color: #222; -webkit-transition: color .2s ease-in-out; -moz-transition: color .2s ease-in-out; transition: color .2s ease-in-out;
}
/* --- Common Button Styles --- */
.frb-btn {
display: block; background-color: #f8f9fa; color: #222; border: 1px solid #9aa0a7; border-radius: 2px; padding: 12px 6px; outline: 0; text-align: center; font-size: 16px; line-height: 1; /*16px @16px*/ cursor: pointer; font-family: inherit; font-weight: 500; transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
} .frb-btn:hover {
background-color: #fff; color: #444; border-color: #a2a9b1;
} .frb-btn:active {
background-color: #d9d9d9; color: #000; border-color: #7d8389;
} .frb-btn:focus {
border-color: #36c; box-shadow: inset 0 0 0 1px #36c;
}
- frb-form input[type="radio"]:checked + .frb-btn,
.frb-form input[type="radio"]:checked + #frb-amt-other-label,
- frb-form .frb-btn.checked {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
/* Blue text buttons */ .frb-btn.frb-btn-btxt {
color: #36c;
} .frb-btn.frb-btn-btxt:active {
color: #2a4b8d;
}
/* Submit/Continue buttons (blue background) */
- frb-btn-submit {
display: block; width: 100%; padding: 7px 8px 8px; color: #fff; background-color: #36c; border-color: #36c; cursor: pointer; border: 0; border-radius: 2px; font-size: 14px; transition: background 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
} .frb-btn-submit:hover {
background-color: #447ff5; border-color: #447ff5;
} .frb-btn-submit:active {
background-color: #2a4b8d; border-color: #2a4b8d; box-shadow: none;
}
.frb-continue .frb-btn-submit {
font-size: 16px;
}
/* Hide radio buttons. Based on http://jqueryui.com/button/#radio */ .frb-amounts li input[type="radio"] {
position: absolute; overflow: hidden; height: 1px; width: 1px; clip: rect(0 0 0 0); border: 0; margin: -1px; padding: 0;
}
/* --- Amount buttons layout --- */
.frb-amounts {
margin-bottom: 11px;
}
.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 { margin: 0px; } .frb-amounts ul li { width: 19%; margin-right: 1%; }
body.rtl .frb-amounts ul li { margin-right: 0; margin-left: 1.5%; }
body.rtl .frb-amounts ul li:nth-child(5n) { margin-left: 0; }
}
/* --- Amount buttons appearance --- */
.frb-amounts li label {
font-size: 18px;
}
@media (min-width: 768px) {
.frb-amounts li label { font-size: 20px; }
}
.frb-amounts li label:active , .frb-amounts li input[type="radio"]:checked + label, .frb-amounts li input[type="radio"].checked + label, .frb-amounts li label.checked {
background-color: #2a4b8d; border-color: #7d8389; color: #fff;
}
.frb-amounts li label {
display: block; width: 100%; height: 50px; padding: 5px; font-size: 16px; line-height: 2.5; /*40px @16px*/ font-style: normal; font-weight: normal
}
/* --- 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; font-size: 16px;
}
/*Disable number spinner*/
- frb-amt-other-input::-webkit-inner-spin-button,
- frb-amt-other-input::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
- 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 {
background: #f8f9fa; 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 --- */
/* Always horizontal */ .frb-methods ul {
display: table; table-layout: fixed; width: 100%; margin: 0;
} .frb-methods ul li {
display: table-cell; padding: 0 4px; vertical-align: top;
}
/* Only where there are 4 methods, display 2x2 */ .frb-methods ul li:first-child:nth-last-child(4), .frb-methods ul li:first-child:nth-last-child(4) ~ li {
float: left; width: 50%; margin-bottom: 4px;
}
.frb-methods ul li:first-child:nth-last-child(4) .frb-btn, .frb-methods ul li:first-child:nth-last-child(4) ~ li .frb-btn {
min-height: 32px;
}
/* --- Payment method buttons appearance --- */
.frb-methods .frb-btn {
width: 100%; padding: 7px; min-height: 50px;
}
/*Adjust padding for method buttons with logo, e.g. payment methods*/ .frb-methods .frb-btn-logo {
padding: 2px 8px;
}
/*Payment method buttons logo sizing*/ .frb-btn-logo svg {
width: 100%; height: 100%; max-height: 24px;
}
.frb-logo-paypal-usd {
margin-bottom: -4px;
}
.frb-methods legend, .frb-methods button {
-webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; transition: all .2s ease-in-out;
}
.frb-methods.hint legend {
color: #588fbb;
} .frb-methods.hint button {
box-shadow: 0 0 5px #588fbb;
}
/* --- In-article close options --- */
- frb-inline-close-options {
display: block; z-index: 999; text-transform: uppercase; background: #f2f2f2; color: black;
}
.frb-inline-close,
- frb-inline-remind {
cursor: pointer; opacity: 1; color: #666666; z-index: 999; text-transform: uppercase;
}
.frb-inline-close {
display: inline-block; padding: 6px;
}
.frb-inline-close-icon {
margin-bottom: -2px; width: 11px;
}
.frb-inline-close:hover,
- frb-inline-remind:hover,
.frb-inline-close:focus,
- frb-inline-remind:focus {
color: #222222;
}
.frb-inline-close:hover .frb-close-x g, .frb-inline-close:focus .frb-close-x g {
stroke: #222222;
}
- frb-inline-close-bottom {
position: absolute; bottom: -32px; left: 0; width: 100%; text-align: center; font-size: 12px;
}
/* --- Smallprint --- */
- frb-inline #frbanner-smallprint {
width: 100%; font-size: 80%; margin-top: 23px; text-align: center; color: #3c3c3c;
}
- frb-inline .recurring-details {
display: none;
}
/* Bottom "reminder" banner styles
*/
- frb-nag {
z-index: 100; position: fixed; left: 0; bottom: 0; width: 100%; display: block; color: black; background-color: white; padding: 10px 25px; text-align: center; font-size: 15px; line-height: 1; /*15px @15px*/ font-weight: bold; border: 5px solid #990000; box-shadow: 0 0 10px rgba(0,0,0,.5); cursor: pointer;
}
- frb-nag:hover {
text-decoration: none;
}
@media (min-width: 720px) {
#frb-nag { font-size: 17px; }
}
- frb-nag img {
height: 19px; width: 19px; margin-bottom: -4px; padding-right: 4px;
}
- 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; /*16.5px @15px*/
} .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);
}
/* give the footer padding so it's visible above the nag */ footer {
padding-bottom: 120px;¨
}
/*!--- Focus styles ----*/
.smallprint a:focus {
outline: 2px solid #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-inline-close:focus {
box-shadow: inset 0 0 0 2px #36c;
}
.frb-btn:focus, .frb-amounts input[type="radio"]:focus + label, .frb-amounts input[type="radio"]:focus + .frb-btn {
border-color: #36c; box-shadow: inset 0 0 0 1px #36c;
}
</style>
<script> /** Provides alterImpressionData hook for CentralNotice
* This info will be sent back with Special:RecordImpression */
mediaWiki.centralNotice.bannerData.alterImpressionData = function( impressionData ) {
// Returning true from this function indicates the banner was shown if (mediaWiki.centralNotice.bannerData.hideReason) { impressionData.reason = mediaWiki.centralNotice.bannerData.hideReason; } if (mediaWiki.centralNotice.bannerData.cookieCount) { impressionData.banner_count = mediaWiki.centralNotice.bannerData.cookieCount; } return !mediaWiki.centralNotice.bannerData.hideResult;
};
var frb = frb || {};
frb.storedOptions = {};
frb.setMethodcc = function(options) {
$('.frb-methods').slideUp(); $('.frb-step2').slideDown(); var submitbutton = document.getElementById("frb-btn-submit"); submitbutton.className += "paymentmethod-cc";
var donationForm = document.donationForm;
$( '.paymentmethod-cc' ).click( function() { if( frb.validateForm() ) { donationForm.elements['rnw-payment_method'].value = 'cc'; donationForm.action = 'https://donate.wikimedia.ch/en/index.html' donationForm.submit(); } else { alert( "Please select an amount to donate (at least Fr. 1.-)" ); return false; } });
};
frb.setMethodpp = function(options) {
$('.frb-methods').slideUp(); $('.frb-step2').slideDown(); var submitbutton = document.getElementById("frb-btn-submit"); submitbutton.className += "paymentmethod-pp";
$( '.paymentmethod-pp' ).click( function() { if( frb.validateForm() ) { donationForm.elements['rnw-payment_method'].value = 'pp'; donationForm.action = 'https://donate.wikimedia.ch/en/index.html' donationForm.submit(); } else { alert( "Please select an amount to donate (at least Fr. 1.-)" ); return false; } });
};
$( '.frb-pm-slip' ).click( function() {
donationForm.elements['rnw-payment_method'].value = 'ezs'; donationForm.action = 'https://donate.wikimedia.ch/en/index.html' donationForm.submit();
});
frb.validateForm = function() {
var form = document.donationForm; var error = false;
// Get amount selection var amount = $('input[name=rnw-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=rnw-amount]:checked').val( amount );
return !error;
};
frb.insertInlineBanner = function() {
// Place frb-inline in article: before first paragraph, or at top var $inlineBanner = $('#frb-inline'); var $firstPara = $('#mw-content-text .mw-parser-output > p:first-of-type').first(); var $infobox = $('#mw-content-text .mw-parser-output > .infobox, #mw-content-text .mw-parser-output > .infobox_v2, #mw-content-text .mw-parser-output > .infobox_v3').first(); var $thumb = $('#mw-content-text .mw-parser-output > .thumb').first(); var mainPage = mw.config.get('wgIsMainPage');
if ( $infobox.length > 0 && !mainPage ) { $infobox.after( $inlineBanner ); } else if ( $thumb.length > 0 && !mainPage ) { $thumb.before( $inlineBanner ); } else if ( $firstPara.length > 0 && !mainPage ) { $firstPara.before( $inlineBanner ); } else { $('#mw-content-text .mw-parser-output').prepend( $inlineBanner ); $inlineBanner.addClass('frb-fullwidth'); }
$inlineBanner.show().addClass('frb-country-' + mw.centralNotice.data.country);
};
frb.initNag = function() {
/* --- Code for sticky "nag" banner --- */ var nagHoverTimeout;
$(window).scroll(function() { var nagRevealPosition = $('#frb-inline').offset().top + $('#frb-inline').outerHeight();
if ( $(window).scrollTop() <= nagRevealPosition ) { $('#frb-nag').finish(); $('#frb-nag').hide(); } else { setTimeout(function(){ if ( $(window).scrollTop() > nagRevealPosition ) { $('#frb-nag').slideDown(); } }, 1500); } });
$('.frb-nag-close').click(function(e) { $('#centralNotice').hide(); // Hide nag (but not inline banner) e.stopPropagation(); });
$('#frb-nag').click(function() { $('html, body').animate({ scrollTop: $('#frb-inline').offset().top }, 400); $('#frb-nag').slideToggle(400); });
};
$(function() {
$('.frb-inline-close').on('click keypress', function(e) { if (e.which === 13 || e.type === 'click') { $('#frb-inline').hide(); mw.centralNotice.hideBanner(); e.stopPropagation(); } });
// Reset "other box" if they click a different amount
// Provide a hint they should click the buttons $('.frb-inline-message').click(function() { $('.frb-methods').addClass('hint'); setTimeout(function() { $('.frb-methods').removeClass('hint'); }, 400); });
/* 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.insertInlineBanner(); }
// Focus for #input_amount_other $('.frb-amt-other').on('click keypress', function(e) { if (e.which === 13 || e.type === 'click') { document.getElementById('frb-amt-other').checked = true; $('#frb-amt-other-input').focus(); e.stopPropagation(); } });
// Activate #input_amount_other radio when tabbing into #frb-amt-other-input // Add focus class to parent $('#frb-amt-other-input').blur(function() { $(this).closest('.frb-amt-other').removeClass('is-focused'); }) .focus(function() { document.getElementById('frb-amt-other').checked = true; $(this).closest('.frb-amt-other').addClass('is-focused'); }); $('#frb-form [id^=frb-amt-ps]').click(function() { $('#frb-amt-other-input').val(); });
});
</script>