MediaWiki:Centralnotice-template-Fundraiser
<style> /* Hide when editing */ .action-edit #centralNotice, .ve-activated #centralNotice {
display: none !important;
}
/* Border-Box */
.frb *, .frb *:before, .frb *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
/* Banner wide settings */
.frb input, .frb button {
font-size: inherit; font-family: inherit;
}
.frb button {
cursor: pointer; outline: 0; text-align: center;
}
/* --- Main banner wrapper --- */
.frb {
display: none; position: absolute; top: 0; left: 0; right: 0; z-index: 110; background: transparent;
}
.frb {
border-bottom: 1px solid #c8ccd1; background-color: #fff; box-shadow: 0 1px 1px rgba(0,0,0,0.1); color: #222; font-size: 16px; line-height: 1.1875; /*19px @16px*/ font-family: "Helvetica Neue", "Helvetica", "Nimbus Sans L", "Arial", "Liberation Sans", sans-serif; font-weight: 500;
}
.frb.frb--minimized {
position: fixed;
}
/* --- Window Styles --- */
.frb-main {
position: relative; display: table; width: 100%; padding: 16px 0 16px 8px; background-color: #FFFFFF; transition: background-color 0.5s ease;
}
body.rtl .frb-main {
padding: 16px 8px 16px 0;
}
/* Minimized styles */ .frb--minimized {
cursor: pointer;
}
.frb--minimized .frb-main:hover {
background-color: #eaf3ff;
}
/* --- Close button --- */
.frb-controls {
display: inline-block; position: absolute; right: 0; top: 0; z-index: 999; font-size: 12px; text-transform: uppercase; cursor: pointer; padding: 8px 16px; color: #72777d;
} body.rtl .frb-controls {
right: auto; left: 0;
}
.frb-close:hover {
color: #000000;
} .frb-close:hover .frb-icon g {
stroke: #000000;
}
/* -------------- Message -------------- */
.frb-message {
position: relative; display: table-cell; width: auto; vertical-align: top; border: 8px solid #990000; border-radius: 12px; background-color: #f8f9fa; padding: 16px 30px; color: #000; font-family: "Linux Libertine", Georgia, Times, serif; font-size: 16px; line-height: 1.4; /*22.4px @16px*/ transition: background-color 0.5s ease;
}
@media (min-width: 900px) {
.frb-message {
font-size: 19px;
}
}
@media (min-width: 1100px) {
.frb-message {
font-size: 22px;
}
}
@media (min-width: 1300px) {
html[lang="en"] .frb-message {
font-size: 24px;
}
}
@media (min-width: 1500px) {
.frb-message {
font-size: 24px;
}
}
.frb-message-icon {
float: left; margin-top: 0.07368421053em; /*1.4px @19px*/ margin-left: calc(-1em + -0.05263157895em); /*-19px + -1px @19px*/ height: 1em; width: 1em;
}
body.rtl .frb-message-icon {
float: right; margin-right: calc(-1em + -0.2105263158em); /*-19px + -4px @19px*/
}
.frb-message p {
margin: 0;
}
.frb-highlight {
border-bottom: 3px solid #990000;
}
/* Minimized styles */ .frb--minimized .frb-message {
padding: 16px 10px 16px 30px; cursor: pointer; font-size: 16px; background-color: transparent;
} body.rtl .frb--minimized .frb-message {
padding: 16px 30px 16px 10px;
}
@media (min-width: 900px) {
.frb--minimized .frb-message {
font-size: 14px;
}
}
@media (min-width: 1050px) {
.frb--minimized .frb-message {
font-size: 16px;
}
}
@media (min-width: 1200px) {
.frb--minimized .frb-message {
font-size: 18px;
}
}
@media (min-width: 1300px) {
.frb--minimized .frb-message {
font-size: 22px;
}
}
/* -------------- Form -------------- */
.frb-form {
display: table-cell; position: relative; width: 25%; min-width: 300px; height: 100%; vertical-align: middle; padding: 0 8px; background: #fff;
}
/* Minimized styles */ .frb--minimized .frb-form {
background-color: transparent;
}
.frb-form:before {
position: absolute; left: 0; top: 50%; content: " "; margin: -10px 0 0 0; border: 10px solid transparent; border-left-color: #990000; pointer-events: none;
} body.rtl .frb-form:before {
left: auto; right: 0; border-left-color: transparent; border-right-color: #990000;
}
.frb-form fieldset {
width: 100%; border: 0; margin: 0 auto; padding: 0 0 8px 0;
}
.frb-form fieldset + fieldset legend {
border-top: 1px solid #CCC;
}
.frb-form legend {
position: relative; top: 0; width: calc(100% - 7px); margin: 0; padding: 14px 0 4px 0; font-weight: normal; line-height: 1.2; /*18px @15px*/ text-align: center; font-size: 15px; color: #696969;
}
.frb-rml-form legend {
font-size: 14px; font-weight: 500; color: #222; line-height: 1.3571428571; /*10px @14px*/ padding: 0 0 8px 0;
}
@media ( max-width: 1400px) {
fieldset.frb-frequency legend {
padding: 14px 15px 4px;
}
}
.frb-form fieldset:first-of-type legend {
padding-top: 0;
}
.frb-form fieldset + fieldset legend:after, .frb-form fieldset + fieldset legend:before {
top: -1px; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.frb-form fieldset + fieldset legend:after {
border-color: rgba(255, 255, 255, 0); border-top-color: #FFFFFF; border-width: 9px; margin-left: -9px;
}
.frb-form fieldset + fieldset legend:before {
border-color: rgba(204, 204, 204, 0); border-top-color: #ccc; border-width: 10px; margin-left: -10px;
}
.frb-form ul {
display: table; table-layout: fixed; width: 100%; margin: 0; padding: 0; list-style: none;
}
.frb-amounts ul:first-child {
margin-bottom: 3px;
}
.frb-form li {
display: table-cell; vertical-align: top; padding-left: 4px;
}
.frb-form li:first-child {
padding-left: 0;
}
.frb-form .frb-methods li {
padding: 4px !important;
}
- frb-form {
margin-top: 12px;
}
/* --- Common Button Styles --- */
/* Hide radio buttons */ .frb-form .frb-methods input[type="radio"], .frb-amt-other input[type="radio"] {
position: absolute; overflow: hidden; height: 1px; width: 1px; clip: rect(0 0 0 0); border: 0; margin: -1px; padding: 0;
}
.frb-btn {
width: 100%; height: 48px; display: block; background-color: #f8f9fa; color: #222222; font-size: 16px; line-height: 1.25; /*20px @16px*/ padding: 13px 4px 15px 4px; border: 1px solid #9aa0a7; border-radius: 2px; outline: 0; text-align: center; cursor: pointer; font-family: inherit; font-weight: 500; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
} .frb-btn:hover {
background-color: #fff; color: #444; border-color: #a2a9b1;
} .frb-btn:active {
background-color: #d9d9d9; color: #000; border-color: #7d8389;
} .frb-form input[type=radio]:checked + .frb-btn {
background-color: #2a4b8d; color: #fff; border-color: #7d8389;
}
.frb-radio, .frb-radio-label {
font-size: 16px; line-height: 1.375; /*22px @16px*/
}
.frb-radio {
float: left; margin: 8px 6px;
}
.frb-radio-label {
cursor: pointer; display: block; white-space: nowrap; font-weight: bold; padding: 6px 2px;
}
.frb-frequency .frb-radio-label {
font-size: 16px; line-height: 1.375; /*22px @16px*/
}
/* Focus styles */
.frb-form input[type=radio]:focus {
outline: 0; }
.frb a:focus, .frb button:focus, .frb-radio:focus + .frb-radio-label, .frb-btn:focus, .frb-close:focus, .frb-btn-submit:focus, .frb-form input[type=radio]:focus + .frb-btn, .frb-form input[type=radio]:focus + #frb-amt-other-label,
- frb-amt-other-input:focus {
outline: 0; border-color: #36c !important; box-shadow: inset 0 0 0 1px #36c;
}
.frb-form input[type=radio]:focus + .frb-btn, .frb-form input[type=radio]:focus + #frb-amt-other-label, .frb-form input[type=radio]:checked + .frb-btn:focus, .frb-form input[type=radio]:checked + #frb-amt-other-label:focus, .frb-form .frb-btn-submit:focus {
box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
}
.frb-btn img {
padding: 0 4px; max-width: 100%; max-height: 20px; /*must equal font line height of frb-btn*/
}
.frb-methods .frb-btn {
height: 64px; line-height: 1.125; /*18px @16px*/
}
.frb-methods svg {
max-width: 100%;
}
.frb-methods .frb-pm-cc .frb-btn {
padding: 7px 4px
}
.frb-methods .frb-pm-cc svg {
max-width: 30%;
}
.frb-country-GB .frb-methods .frb-pm-cc svg, .frb-country-IE .frb-methods .frb-pm-cc svg {
max-width: 38%; max-height: 24px;
}
.frb-country-US .frb-methods .frb-pm-cc svg, .frb-country-AU .frb-methods .frb-pm-cc svg {
max-width: 45%; max-height: 23px;
}
@media (min-width: 1800px) {
.frb-country-US .frb-methods .frb-pm-cc svg,
.frb-country-AU .frb-methods .frb-pm-cc svg {
max-width: 22%;
}
}
.frb-country-US .frb-logo-jcb, .frb-country-CA .frb-logo-jcb, .frb-country-NZ .frb-logo-jcb, .frb-country-AU .frb-logo-discover, .frb-country-CA .frb-logo-discover, .frb-country-GB .frb-logo-discover, .frb-country-IE .frb-logo-discover, .frb-country-NZ .frb-logo-discover { display: none; }
/* Blue text buttons */ .frb-btn.frb-btn-btxt {
color: #3366cc;
} .frb-btn.frb-btn-btxt:active {
color: #2a4b8d;
}
/* Submit/Continue buttons (blue background) */ .frb-btn-submit {
width: 100%; display: block; margin-top: 8px; padding: 8px; color: #fff; background-color: #3366cc; border-color: #3366cc; cursor: pointer; border: 0; border-radius: 2px; font-size: 16px; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; transition: all .25s ease-in-out;
} .frb-btn-submit:hover {
background-color: #447ff5; border-color: #447ff5;
} .frb-btn-submit:active {
background-color: #2a4b8d; border-color: #2a4b8d; box-shadow: none;
}
/* --- Other Amount --- */
.frb-amt-other-label {
display: none;
}
.frb-amt-other .frb-btn {
display: inline-block; width: 100%; padding: 2px 0 3px 0;
}
.frb-amt-other span {
display: block; height: auto; margin-bottom: 1px; font-size: 10px; line-height: 1; /*10px @16px*/ cursor: pointer;
}
.frb-amt-other #frb-amt-other-input {
width: 100%; border: 1px solid #ccc; color: #555; font-size: 16px; padding: 7px 2px; border-radius: 0; direction: ltr; text-align: center; font-family: inherit;
}
/* --- Payment method Buttons --- */
/* Hide methods which aren't monthly capable when monthly option is selected */ .form-monthly .no-monthly {
display: none !important;
}
.frb-form .frb-methods {
padding-bottom: 0;
}
/* 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%;
} .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 {
height: 48px; padding: 13px 4px 15px 4px;
}
/* --- Secure Transaction Legend --- */ .frb-secure-transaction {
display: block; padding: 5px 12px; margin: 0 auto; color: #000; font-size: 12px; text-transform: uppercase; text-align: center; opacity: .7;
} .frb-secure-transaction img {
width: 14px; height: 14px; display: inline-block;
}
/* --- Footer / Small Print --- */ .frb-footer {
padding: 0 24px 6px; font-size: 12px; color: #555; text-align: center; display: none; font-weight: normal;
}
.frb:hover .frb-footer {
display: block;
}
/* Minimized styles */ .frb.frb--minimized:hover .frb-footer {
display: none;
}
/* --- Show and Hiding (Minimize and Maximize) --- */ .frb-btn-toggle-size {
display: none; /*shows when minimized*/ width: 100%; font-size: 16px; background-color: #2a4b8d; color: #fff; border-color: #2a4b8c; transition: color 0.5s ease; text-transform: uppercase; font-weight: bold; letter-spacing: 0.0375em; /*0.6px @16px*/
}
.frb-btn-toggle-size:hover, .frb-btn-toggle-size:focus {
background-color: #2a4b8d; border-color: #2a4b8c; color: #eaf3ff;
}
/*Minimized styles*/ .frb--minimized .frb-btn-toggle-size {
display: block; margin: 0 auto; width: 97%;
}
.frb--minimized:hover .frb-btn-toggle-size {
color: #eaf3ff;
}
/* Messages */ .frb-message__minimized {
display: none;
} .frb-message__maximized {
display: block;
} .frb-greeting {
display: block; margin-bottom: 4px;
}
/* Minimized styles */ .frb--minimized .frb-message__minimized {
display: block;
} .frb--minimized .frb-message__maximized, .frb--minimized #frb-form, .frb--minimized .frb-rml {
display: none;
}
/* --- Maybe later --- */
.frb-rml {
position: relative; width: auto; padding: 0; margin-top: 4px;
}
.frb-rml-form {
display: none; position: absolute; width: 100%; padding: 16px; margin-top: 6px; text-align: center; background: white; border: 1px solid #888888; border-radius: 2px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.15); z-index: 10;
}
.frb-rml-form:after, .frb-rml-form:before {
bottom: 100%; left: 50%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;
}
.frb-rml-form:after {
border-bottom-color: #fff; border-width: 10px; margin-left: -10px;
}
.frb-rml-form:before {
border-bottom-color: #888; border-width: 11px; margin-left: -11px;
}
.frb-rml-form input {
width: 100%; padding: 8px; margin: 0; border: 1px solid #9aa0a7; border-radius: 2px; color: #000; direction: ltr;
}
.frb-rml-form input.error {
border-color: #ff0000; box-shadow: inset 0 0 0 2px #ff0000;
}
.frb-rml-form .frb-rml-error {
color: #ff0000; padding-top: 4px;
}
.frb-rml-ty {
padding: 0 16px; text-align: center; cursor: default;
} </style>
<script> var frb = frb || {};
frb.addSpace = function() {
if ( $('.frb').is(':visible') ) {
/* Add space for the banner, and extra px if given below. called on load and window resize */
var extra = 32;
var bannerHeight = $('.frb-main').height();
$('#mw-panel').css('top', bannerHeight+extra);
$('#mw-head').css('top', bannerHeight+extra);
$('#mw-page-base').css('margin-top', bannerHeight+extra);
$('.frb').addClass('frb-country-' + Geo.country);
}
};
frb.show = function() {
$('body').prepend($('#centralNotice'));
$('.frb').css('display', 'block');
frb.addSpace();
$(window).resize(function() {
frb.addSpace();
});
};
frb.resetMw = function() {
$('#mw-panel').css('top', '0px');
$('#mw-head').css('top', '0px');
$('#mw-page-base').css('margin-top', '0');
}
frb.hide = function() {
/* Hide the banner, and remove the extra space which was added for it */
/* Don't set a cookie: this is a large banner and only shown on first view anyway */
$('.frb').hide();
frb.resetMw();
};
frb.toggleMonthly = function( monthly ) {
if( monthly.type === 'checkbox' ){
monthly = monthly.checked;
}
if ( monthly ) {
$('#frb-form').addClass('form-monthly');
} else {
$('#frb-form').removeClass('form-monthly');
}
};
$(function() {
var language = mw.centralNotice.data.uselang; var country = mw.centralNotice.data.country; var currency = frb.getCurrency(country);
frb.initAmountOptions(); frb.localizeAmountOptions(frb.amounts.options7, currency, country, language, true);
var currencySymbol = frb.formatCurrency( currency, , language ).replace(' ', );
// Hide Banner when on click and enter when focused
$('.frb-close').on('click keypress', function(e){
if (e.which === 13 || e.type === 'click') {
frb.hide();
e.stopPropagation();
}
});
// Show RML form on Enter
$('.frb-rml-link').keyup(function(event){
if (event.keyCode == 13) {
$('.frb-rml-form').toggle();
$('#frb-rml-email').focus();
}
});
// Focus for #input_amount_other
$('.frb-amt-other').click(function() {
document.getElementById('input_amount_other').checked = true;
$('#frb-amt-other-input').focus();
});
// Activate #input_amount_other radio when tabbing into #frb-amt-other-input
$('#frb-amt-other-input').focus(function() {
document.getElementById('input_amount_other').checked = true;
});
// Minimize on scroll
var stickyHeaderTop = $('.frb').height();
function minimizeScrollFunction() {
if( $(window).scrollTop() > stickyHeaderTop ) {
$('.frb').css({position: 'fixed', top: '0px'}).addClass('frb--minimized');
} else {
$('.frb').css({position: 'absolute', top: '0px'}).removeClass('frb--minimized');
frb.addSpace();
}
}
var scrollPos;
$(window).on('scroll resize', function() {
scrollPos = $(window).scrollTop();
// Keep frb minimized until clicked or the user scrolls to the top of the page.
if ( frb.clicked === false ) {
minimizeScrollFunction();
}
// Restore default state
if ( scrollPos === 0 ) {
$('.frb').css({position: 'absolute', top: '0px'}).removeClass('frb--minimized');
frb.addSpace();
frb.clicked = false;
}
});
frb.clicked = false;
$('.frb').click(function() {
if ( $(this).hasClass('frb--minimized') ) {
$(this).css({position: 'fixed', top: '0px'}).removeClass('frb--minimized');
frb.clicked = true;
}
});
/* 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.show();
}
}); </script>